/* ========================================================================= WILD — maquette de proposition Palette et typographie reprises de l'existant : le vert canard #005F64 et le crème #FFF5E9 sont les couleurs déclarées du site actuel, Josefin Sans et Josefin Slab sont les polices de leur carte imprimée. Un seul fichier, trois graisses de police — contre 85 fichiers et 237 déclarations @font-face aujourd'hui. ========================================================================= */ :root{ --vert:#005F64; --vert-fonce:#0C2E31; --vert-clair:#3E8F8C; --creme:#FFF5E9; --creme-ombre:#F2E5D4; --or:#7E7449; --or-clair:#C9A227; --encre:#12292B; --gris:#5A6A6B; --ligne:rgba(12,46,49,.14); --blanc:#fff; --rouge:#B3452F; --ok:#3D7A55; /* L'identité WILD reste la même pour les deux maisons : même vert, même crème, mêmes polices, même logo. Ce qui distingue les établissements est STRUCTUREL (pages séparées, jamais mélangées) et SIGNALÉTIQUE : un bandeau de lieu permanent et une teinte de repère discrète, prise dans la palette existante — pas une seconde charte. */ --lieu:var(--or-clair); --lieu-voile:rgba(201,162,39,.16); --pad:clamp(18px,5vw,64px); --rayon:14px; --ombre:0 2px 4px rgba(12,46,49,.05),0 10px 30px rgba(12,46,49,.07); --serif:"Josefin Slab",Georgia,serif; --sans:"Josefin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --lire:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--creme);color:var(--encre); font-family:var(--lire);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{font-family:var(--sans);font-weight:600;line-height:1.15;margin:0;letter-spacing:.01em} p{margin:0 0 1em} .enveloppe{max-width:1180px;margin:0 auto;padding-inline:var(--pad)} .etroit{max-width:760px} /* ---------------------------------------------------------------- En-tête */ .entete{ position:sticky;top:0;z-index:50;background:rgba(0,95,100,.97); color:var(--creme);backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,245,233,.16); } .entete-in{display:flex;align-items:center;gap:20px;min-height:66px} .logo{ display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px; text-decoration:none;color:var(--creme);padding-right:.3em; } /* Le lettrage est une image détourée : sa hauteur commande, la largeur suit. */ .logo-img{display:block;height:30px;width:auto} .logo small{display:block;font-size:.5rem;letter-spacing:.24em;opacity:.7;font-weight:400} .nav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap} .nav a{ text-decoration:none;padding:8px 13px;border-radius:999px;font-size:.87rem; letter-spacing:.04em;opacity:.88;transition:background .16s,opacity .16s; } .nav a:hover,.nav a:focus-visible{background:rgba(255,245,233,.14);opacity:1} .nav a[aria-current="page"]{background:rgba(255,245,233,.18);opacity:1} .btn-resa{ background:var(--or-clair);color:var(--vert-fonce)!important;font-weight:600; padding:9px 17px!important;opacity:1!important;letter-spacing:.06em; } .btn-resa:hover{background:#dbb43a!important} .selecteur-lieu{ margin-left:6px;background:rgba(255,245,233,.12);border:1px solid rgba(255,245,233,.28); color:var(--creme);font:inherit;font-size:.83rem;padding:7px 10px;border-radius:999px; } .selecteur-lieu option{color:var(--encre)} /* ------------------------------------------------- Identité d'établissement Deux teintes de repère prises dans la palette WILD. Elles ne remplacent pas la charte : elles répondent à une seule question, « je suis sur laquelle des deux maisons ? ». */ [data-lieu="sr"]{--lieu:#C9A227;--lieu-voile:rgba(201,162,39,.16)} /* ambre — le soir, les guirlandes */ [data-lieu="pp"]{--lieu:#C0673F;--lieu-voile:rgba(192,103,63,.14)} /* terracotta — le matin, le café */ /* Le bandeau de lieu : collé sous l'en-tête, il ne défile jamais hors de vue. Tant qu'on est sur une page d'établissement, son nom est à l'écran. */ .bandeau-lieu{ position:sticky;top:66px;z-index:45;background:var(--vert-fonce);color:var(--creme); border-bottom:3px solid var(--lieu); } .bandeau-lieu-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:52px;padding-block:8px} .bandeau-lieu .ou{ font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase; opacity:.62; } .bandeau-lieu .nom-lieu{ font-family:var(--sans);font-weight:600;font-size:1.06rem;letter-spacing:.1em; text-transform:uppercase;color:var(--lieu);display:flex;align-items:center;gap:10px; } .bandeau-lieu .nom-lieu::before{ content:"";width:10px;height:10px;border-radius:50%;background:var(--lieu);flex:0 0 auto; } .bandeau-lieu .liens-lieu{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center} .bandeau-lieu .liens-lieu a{ text-decoration:none;font-size:.86rem;padding:7px 13px;border-radius:999px;opacity:.86; transition:background .16s,opacity .16s; } .bandeau-lieu .liens-lieu a:hover{background:rgba(255,245,233,.14);opacity:1} .bandeau-lieu .liens-lieu a[aria-current="page"]{background:var(--lieu-voile);color:var(--lieu);opacity:1;font-weight:600} .lien-autre-maison{ font-size:.82rem;text-decoration:none;padding:7px 13px;border-radius:999px; border:1px solid rgba(255,245,233,.28);opacity:.8;white-space:nowrap; } .lien-autre-maison:hover{opacity:1;background:rgba(255,245,233,.12)} /* Sur une page d'établissement, les repères de la charte prennent sa teinte. */ [data-lieu] .filet{background:var(--lieu)} [data-lieu] .sur-titre{color:var(--lieu)} [data-lieu] .lieu-genre{color:var(--lieu)} [data-lieu] .btn-or{background:var(--lieu);color:#fff} [data-lieu="sr"] .btn-or{color:var(--vert-fonce)} [data-lieu] .btn-resa{background:var(--lieu)} [data-lieu="pp"] .btn-resa{color:#fff!important} [data-lieu] .encart{border-left-color:var(--lieu)} [data-lieu] .lieu-faits .ico{color:var(--lieu)} [data-lieu] .creneau[aria-pressed="true"]{background:var(--lieu);border-color:var(--lieu);color:#fff} [data-lieu="sr"] .creneau[aria-pressed="true"]{color:var(--vert-fonce)} [data-lieu] .filtre[aria-pressed="true"]{background:var(--lieu);border-color:var(--lieu);color:#fff} [data-lieu="sr"] .filtre[aria-pressed="true"]{color:var(--vert-fonce)} [data-lieu] .plat-prix{color:var(--vert)} [data-lieu] .carte-outils{top:118px} [data-lieu] .famille{scroll-margin-top:220px} /* Avertissement au moment de changer de maison : on ne bascule pas par erreur. */ .rappel-autre{ background:var(--lieu-voile);border-left:4px solid var(--lieu);padding:16px 20px; border-radius:0 12px 12px 0;font-size:.93rem;margin-top:30px; } .rappel-autre strong{color:var(--vert-fonce)} /* ---------------------------------------------------------------- Boutons */ .btn{ display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px; font-family:var(--lire);font-size:.94rem;font-weight:600;text-decoration:none; border:1.5px solid transparent;cursor:pointer;transition:transform .12s,background .16s,box-shadow .16s; } .btn:active{transform:translateY(1px)} .btn-or{background:var(--or-clair);color:var(--vert-fonce)} .btn-or:hover{background:#dbb43a;box-shadow:0 6px 18px rgba(201,162,39,.32)} .btn-vert{background:var(--vert);color:var(--creme)} .btn-vert:hover{background:#00777d} .btn-vide{border-color:currentColor;background:transparent} .btn-vide:hover{background:rgba(12,46,49,.06)} .btn-clair{border-color:rgba(255,245,233,.6);color:var(--creme);background:transparent} .btn-clair:hover{background:rgba(255,245,233,.14)} /* ---------------------------------------------------------------- Bandeau */ /* HAUTEUR UNIQUE, et la même sur toutes les pages. Deux bandeaux qui ne font pas exactement la même hauteur se voient immédiatement quand on passe d'une maison à l'autre : le bloc de contenu qui suit remonte ou descend, et la bascule a l'air d'un autre site. On fixe donc la hauteur (pas un minimum, qu'un titre plus long ferait grandir d'un côté seulement) et on laisse le texte se placer dedans. */ .bandeau{ position:relative;min-height:clamp(400px,58vh,520px); display:grid;align-items:end;overflow:hidden; } .bandeau-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Intégration de la brique fond-reserve-regimes dans un bandeau. fond.css n'est pas touché : il est écrit pour un fond de PAGE entière, où `background-attachment:fixed` cadre l'image sur la fenêtre. Dans un bandeau de 470 px de haut, ce cadrage-là recadre l'image n'importe comment — et sur iOS, `fixed` est purement et simplement ignoré. On repasse donc en `scroll` ici, dans le contexte du bandeau, sans modifier la brique. */ .bandeau .fonds{z-index:0} .bandeau .fond{background-attachment:scroll;background-position:center center} .bandeau .fonds[data-parallaxe]{inset:0;height:100%} .bandeau .fonds[data-parallaxe] .fond{block-size:calc(100% * var(--fond-zoom,1))} /* Ordre de empilement du bandeau, déclaré à un seul endroit : 0 = les calques de photo (la brique les monte à 1 quand ils sont allumés) 2 = le voile de lisibilité 3 = le texte, toujours au-dessus de tout À z-index égal, un ::after est peint APRÈS le contenu et passe devant : le texte doit donc être strictement supérieur, jamais égal. */ /* Le dégradé doit rester lisible sur une photo de jardin en plein soleil : il descend franchement à partir de la moitié basse, là où vit le texte. */ /* LE VOILE DE LISIBILITÉ, PILOTABLE. Sa forme, sa couleur et son intensité sont des variables : l'aperçu de l'administration et le vrai bandeau partagent donc les mêmes règles, et ce qu'on règle est exactement ce qu'on obtient. Par défaut il ne couvre que le bas — là où se trouve le texte. Étendu à toute la hauteur, il ternit la photo sur toute sa surface et on ne voit plus le jardin, qui est pourtant l'argument. */ .bandeau,.apercu-fond-boite{ --voile-couleur:#0C2E31; --voile-opacite:.82; } .bandeau::after,.apercu-fond-boite::after{ content:"";position:absolute;inset:auto 0 0 0;height:68%;z-index:2; pointer-events:none; background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--voile-couleur) calc(var(--voile-opacite) * 41%), transparent) 42%, color-mix(in srgb, var(--voile-couleur) calc(var(--voile-opacite) * 100%), transparent) 100%); } [data-voile="haut-bas"]::after{ inset:0;height:auto; background:linear-gradient(180deg, color-mix(in srgb, var(--voile-couleur) calc(var(--voile-opacite) * 62%), transparent) 0%, transparent 34%, transparent 52%, color-mix(in srgb, var(--voile-couleur) calc(var(--voile-opacite) * 100%), transparent) 100%); } [data-voile="entier"]::after{ inset:0;height:auto; background:color-mix(in srgb, var(--voile-couleur) calc(var(--voile-opacite) * 70%), transparent); } [data-voile="radial"]::after{ inset:0;height:auto; background:radial-gradient(ellipse at 50% 38%, transparent 8%, color-mix(in srgb, var(--voile-couleur) calc(var(--voile-opacite) * 96%), transparent) 96%); } [data-voile="aucun"]::after{display:none} .apercu-fond-boite{position:relative;overflow:hidden;border-radius:10px} /* Le fond du bandeau change à chaque visite : on ne peut donc pas caler la lisibilité sur une photo précise. Plutôt que d'assombrir toute l'image, le texte porte sa propre ombre — dense et courte pour détacher les lettres, large et diffuse pour poser une base sombre juste derrière elles. */ .bandeau-txt{ position:relative;z-index:3;color:var(--creme);padding-block:clamp(26px,5vw,56px);width:100%; text-shadow:0 1px 3px rgba(8,30,32,.72),0 2px 26px rgba(8,30,32,.62); } .bandeau-txt h1{text-shadow:0 2px 4px rgba(8,30,32,.78),0 4px 34px rgba(8,30,32,.66)} .bandeau-txt .btn{text-shadow:none} .bandeau h1{font-size:clamp(1.9rem,5.2vw,3.5rem);letter-spacing:.015em;text-wrap:pretty;max-width:22ch} .bandeau .accroche{font-size:clamp(.97rem,2vw,1.14rem);max-width:46ch;margin-top:12px;opacity:.96} .sur-titre{ font-family:var(--sans);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase; color:var(--or-clair);margin-bottom:12px;font-weight:600; } /* Sur une photo, un texte doré fin ne tient aucun contraste fiable — le fond d'une photo change à chaque image. On lui donne donc son propre fond plutôt que de compter sur le dégradé du bandeau. */ .bandeau .sur-titre{ display:inline-block;background:rgba(8,30,32,.72);padding:7px 15px;border-radius:999px; text-shadow:none;backdrop-filter:blur(3px);margin-bottom:16px; } .bandeau .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} /* -------------------------------------------------------------- Bandeau réputation */ .reputation{background:var(--vert-fonce);color:var(--creme);padding-block:clamp(22px,4vw,34px)} .reputation-grille{display:grid;gap:clamp(16px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center} .reput-note{font-family:var(--sans);font-size:2.1rem;font-weight:600;color:var(--or-clair);line-height:1} .reput-lib{font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;opacity:.74;margin-top:7px} .etoiles{color:var(--or-clair);letter-spacing:.14em;font-size:.94rem;margin-top:5px} /* ---------------------------------------------------------------- Sections */ .section{padding-block:clamp(48px,8vw,96px)} .section-vert{background:var(--vert);color:var(--creme)} .section-creme-fonce{background:var(--creme-ombre)} .titre-section{font-size:clamp(1.65rem,4vw,2.5rem);margin-bottom:10px;text-wrap:balance} .chapeau{font-size:1.04rem;color:var(--gris);max-width:62ch;margin-bottom:34px} .section-vert .chapeau{color:rgba(255,245,233,.82)} .filet{width:56px;height:4px;background:var(--or-clair);border-radius:2px;margin-bottom:22px} /* ---------------------------------------------------------------- Deux lieux */ .lieux{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(310px,1fr))} .lieu{ background:var(--blanc);border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre); display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s; } .lieu:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(12,46,49,.07),0 18px 44px rgba(12,46,49,.12)} .lieu-img{aspect-ratio:16/10;object-fit:cover;width:100%} .lieu-corps{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1} .lieu h3{font-size:1.5rem;margin-bottom:4px} .lieu-genre{ font-family:var(--sans);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase; color:var(--or);margin-bottom:14px;font-weight:600; } .lieu-desc{color:var(--gris);font-size:.96rem;flex:1} .lieu-faits{list-style:none;padding:0;margin:16px 0 20px;display:grid;gap:8px;font-size:.9rem} .lieu-faits li{display:flex;gap:10px;align-items:flex-start} .lieu-faits .ico{color:var(--vert);flex:0 0 18px;margin-top:2px} .lieu-actions{display:flex;gap:10px;flex-wrap:wrap} /* ---------------------------------------------------------------- Carte (menu) */ .carte-outils{ position:sticky;top:66px;z-index:40;background:var(--creme); border-bottom:1px solid var(--ligne);padding-block:14px; } .filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .filtre{ border:1.5px solid var(--ligne);background:var(--blanc);color:var(--encre); padding:8px 15px;border-radius:999px;font:inherit;font-size:.86rem;cursor:pointer; transition:background .14s,border-color .14s,color .14s; } .filtre:hover{border-color:var(--vert-clair)} .filtre[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:var(--creme)} .filtre-lib{font-size:.82rem;color:var(--gris);margin-right:4px;letter-spacing:.06em;text-transform:uppercase} .ancres{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px} .ancres a{ font-size:.83rem;text-decoration:none;padding:6px 12px;border-radius:999px; background:rgba(0,95,100,.08);color:var(--vert);transition:background .14s; } .ancres a:hover{background:rgba(0,95,100,.17)} .famille{margin-top:clamp(36px,6vw,62px);scroll-margin-top:170px} .famille-tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px} .famille h2{font-size:clamp(1.4rem,3.4vw,2.05rem)} .famille-note{color:var(--gris);font-size:.94rem;max-width:60ch;margin-bottom:20px} .compte-fam{font-size:.8rem;color:var(--gris);letter-spacing:.08em} .plats{display:grid;gap:2px} .plat{ display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:2px 18px;align-items:start; padding:12px 16px;border-radius:10px;transition:background .14s; } /* Le prix (riels + dollars, sur deux lignes) court sur les deux rangées de la colonne de droite : il ne gonfle plus la ligne du nom, et la description se pose juste sous le nom. */ .plat-nom{grid-column:1;grid-row:1} .plat-prix{grid-column:2;grid-row:1 / span 2;text-align:right} .plat-desc{grid-column:1;grid-row:2} .plat:hover{background:rgba(0,95,100,.045)} .plat[hidden]{display:none} .plat-nom{font-family:var(--sans);font-size:calc(1.06rem + 2pt);font-weight:600;letter-spacing:.03em;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .plat-prix{font-family:var(--sans);font-weight:600;font-size:1.04rem;white-space:nowrap;color:var(--vert)} .plat-prix small{display:block;font-size:.72rem;color:var(--gris);font-weight:400;text-align:right;letter-spacing:.02em} .plat-desc{color:var(--gris);font-size:.92rem;line-height:1.5;margin:0;max-width:72ch} .plat-vol{font-size:.8rem;color:var(--gris);font-weight:400;letter-spacing:.04em} .etiq{ font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px; border-radius:999px;font-weight:600;white-space:nowrap; } .et-vege{background:#E4F1E4;color:#2F6B3A} .et-vegan{background:#D8EDDC;color:#1F5C33} .et-epice{background:#FBE6DF;color:var(--rouge)} .et-signature{background:#F7EED6;color:#6E6032} .et-rupture{background:#EDEDED;color:#6B6B6B} .plat.rupture .plat-nom,.plat.rupture .plat-prix{opacity:.45;text-decoration:line-through} .plat.rupture .plat-desc{opacity:.5} .vide-filtre{padding:40px 16px;text-align:center;color:var(--gris)} /* ------------------------------------------------------------- Allergènes */ .encart{ background:var(--blanc);border-left:4px solid var(--vert);border-radius:0 var(--rayon) var(--rayon) 0; padding:22px 26px;box-shadow:var(--ombre);margin-top:34px; } .encart h3{font-size:1.12rem;margin-bottom:8px} .encart p{margin-bottom:0;color:var(--gris);font-size:.95rem} .encart-or{border-left-color:var(--or-clair)} /* ------------------------------------------------------------- Réservation */ .resa-grille{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start} @media (max-width:860px){.resa-grille{grid-template-columns:1fr}} .panneau{background:var(--blanc);border-radius:var(--rayon);padding:clamp(22px,3.5vw,34px);box-shadow:var(--ombre)} .champ{margin-bottom:18px} .champ label{display:block;font-family:var(--sans);font-weight:600;font-size:.92rem;margin-bottom:7px;letter-spacing:.03em} .champ input,.champ select,.champ textarea{ width:100%;padding:12px 14px;border:1.5px solid var(--ligne);border-radius:10px; font:inherit;font-size:.96rem;background:var(--creme);color:var(--encre); } .champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--vert-clair);outline-offset:1px;border-color:transparent} .champ .aide{font-size:.83rem;color:var(--gris);margin-top:6px} .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:520px){.duo{grid-template-columns:1fr}} .creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;margin-top:4px} .creneau{ border:1.5px solid var(--ligne);background:var(--blanc);border-radius:10px;padding:11px 6px; font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;text-align:center; transition:border-color .14s,background .14s,color .14s; } .creneau .reste{display:block;font-size:.7rem;font-weight:400;color:var(--gris);margin-top:3px;letter-spacing:.02em} .creneau:hover:not(:disabled){border-color:var(--vert)} .creneau[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:var(--creme)} .creneau[aria-pressed="true"] .reste{color:rgba(255,245,233,.8)} .creneau:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through} .creneau.tendu{border-color:#E0B77A} .recap{position:sticky;top:90px} .recap dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0 0 20px} .recap dt{color:var(--gris);font-size:.88rem} .recap dd{margin:0;font-weight:600;text-align:right;font-family:var(--sans);letter-spacing:.02em} .recap .attente{color:var(--gris);font-weight:400;font-family:var(--lire)} .confirme{background:#E8F3EC;border-left:4px solid var(--ok);padding:18px 22px;border-radius:0 12px 12px 0;margin-top:18px} .confirme strong{color:var(--ok)} /* ----------------------------------------------------------- Infos pratiques */ .infos{display:grid;gap:clamp(20px,3vw,30px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .info-bloc h3{font-size:1.08rem;margin-bottom:10px;display:flex;align-items:center;gap:9px} .info-bloc p,.info-bloc address{font-style:normal;color:var(--gris);font-size:.96rem;margin:0 0 6px} .horaires{list-style:none;padding:0;margin:0;font-size:.95rem} .horaires li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed var(--ligne)} .horaires li:last-child{border-bottom:0} .horaires .jour{color:var(--gris)} .horaires .aujourdhui{font-weight:700;color:var(--vert)} .horaires .aujourdhui .jour{color:var(--vert)} .carte-geo{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--rayon);box-shadow:var(--ombre)} .etat-ouvert{ display:inline-flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600; padding:6px 14px;border-radius:999px;background:#E8F3EC;color:var(--ok); } .etat-ouvert::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor} .etat-ferme{background:#F6E9E6;color:var(--rouge)} /* ---------------------------------------------------------------- Galerie */ .galerie-photos{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .galerie-photos img{border-radius:10px;aspect-ratio:1;object-fit:cover} /* ---------------------------------------------------------------- Avis */ .avis-grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .avis{background:var(--blanc);border-radius:var(--rayon);padding:24px;box-shadow:var(--ombre)} .avis blockquote{margin:0 0 14px;font-size:1rem;line-height:1.6} .avis .qui{font-size:.85rem;color:var(--gris)} .avis .etoiles{margin-bottom:12px;margin-top:0} /* ---------------------------------------------------------------- Pied */ .pied{background:var(--vert-fonce);color:rgba(255,245,233,.82);padding-block:clamp(40px,6vw,64px);font-size:.93rem} .pied-grille{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .pied h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or-clair);margin-bottom:14px} .pied a{color:inherit;text-decoration:none} .pied a:hover{color:var(--creme);text-decoration:underline} .pied ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .socials{display:flex;gap:10px;flex-wrap:wrap} .socials a{ display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; border-radius:50%;background:rgba(255,245,233,.1);transition:background .16s; } .socials a:hover{background:rgba(255,245,233,.24)} .pied-bas{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,245,233,.16);font-size:.85rem;opacity:.7} /* ------------------------------------------------- Bandeau de démonstration */ .demo-bandeau{ background:var(--or);color:var(--creme);font-size:.85rem;padding:9px 0; text-align:center;letter-spacing:.02em; } .demo-bandeau a{color:var(--creme);font-weight:600} .demo-bandeau b{color:#fff} /* ---------------------------------------------------------------- Admin */ .admin{display:grid;grid-template-columns:238px 1fr;min-height:100vh;background:var(--creme)} /* En colonne unique, une navigation de 25 entrées repousserait tout le contenu sous la ligne de flottaison : on la borne et on la rend défilable. */ @media (max-width:820px){ .admin{grid-template-columns:1fr} .admin-flanc{max-height:42vh;overflow-y:auto;position:sticky;top:0;z-index:30; box-shadow:0 6px 18px rgba(12,46,49,.18)} } .admin-flanc{background:var(--vert-fonce);color:rgba(255,245,233,.82);padding:22px 0} .admin-flanc .logo{padding-inline:22px;margin-bottom:22px;display:flex} /* « administration » compte quatorze lettres contre quatre au lettrage : sans resserrage, le mot déborderait franchement du logo posé au-dessus. */ .admin-flanc .logo small{font-size:.44rem;letter-spacing:.135em} .admin-flanc h5{ font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; color:var(--or-clair);padding:16px 22px 7px;margin:0; } .admin-flanc ul{list-style:none;margin:0;padding:0} .admin-flanc a{display:block;padding:8px 22px;text-decoration:none;font-size:.92rem;transition:background .14s} .admin-flanc a:hover{background:rgba(255,245,233,.09)} .admin-flanc a.actif{background:rgba(201,162,39,.2);color:var(--creme);box-shadow:inset 3px 0 0 var(--or-clair)} .admin-flanc .sous{padding-left:38px;font-size:.87rem;opacity:.8} .admin-corps{padding:clamp(20px,3vw,38px);min-width:0} .tuiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin-bottom:30px} .tuile{background:var(--blanc);border-radius:12px;padding:18px 20px;box-shadow:var(--ombre)} .tuile .n{font-family:var(--sans);font-size:1.95rem;font-weight:600;color:var(--vert);line-height:1} .tuile .l{font-size:.81rem;color:var(--gris);letter-spacing:.06em;text-transform:uppercase;margin-top:6px} .tuile.alerte .n{color:var(--rouge)} .tuile.alerte{box-shadow:0 0 0 1.5px rgba(179,69,47,.3),var(--ombre)} .liste-dnd{background:var(--blanc);border-radius:12px;box-shadow:var(--ombre);overflow:hidden} .ligne-dnd{ display:grid;grid-template-columns:30px 1fr auto auto;gap:14px;align-items:center; padding:13px 16px;border-bottom:1px solid var(--ligne);background:var(--blanc); } .ligne-dnd:last-child{border-bottom:0} .ligne-dnd.glisse{opacity:.4} .ligne-dnd.cible{border-top:2px solid var(--or-clair)} .poignee{cursor:grab;color:#B9C4C3;font-size:1.15rem;user-select:none;text-align:center} .poignee:active{cursor:grabbing} .ligne-dnd .nom{font-family:var(--sans);font-weight:600;letter-spacing:.02em} .ligne-dnd .meta{font-size:.84rem;color:var(--gris)} .bascule{ position:relative;width:44px;height:25px;border-radius:999px;border:0;background:#CFD8D7; cursor:pointer;transition:background .18s;flex:0 0 auto; } .bascule::after{ content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%; background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25); } .bascule[aria-pressed="true"]{background:var(--ok)} .bascule[aria-pressed="true"]::after{transform:translateX(19px)} .admin-note{ background:#FFF8E8;border-left:4px solid var(--or-clair);padding:14px 18px; border-radius:0 10px 10px 0;font-size:.9rem;color:#5E5533;margin-bottom:24px; } .admin-note strong{color:#463F22} .tableau{width:100%;border-collapse:collapse;background:var(--blanc);border-radius:12px;overflow:hidden;box-shadow:var(--ombre)} .tableau th{ background:var(--vert-fonce);color:var(--creme);text-align:left;padding:11px 15px; font-family:var(--sans);font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600; } .tableau td{padding:12px 15px;border-bottom:1px solid var(--ligne);font-size:.93rem} .tableau tr:last-child td{border-bottom:0} .badge{font-size:.74rem;padding:3px 9px;border-radius:999px;font-weight:600;letter-spacing:.04em} .badge-neuf{background:#FBE6DF;color:var(--rouge)} .badge-ok{background:#E4F1E4;color:var(--ok)} .onglets{display:flex;gap:6px;border-bottom:1.5px solid var(--ligne);margin-bottom:24px;flex-wrap:wrap} .onglet{ background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1.5px; padding:11px 16px;font:inherit;font-size:.93rem;cursor:pointer;color:var(--gris); } .onglet[aria-selected="true"]{color:var(--vert);border-bottom-color:var(--vert);font-weight:600} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } /* ------------------------------------------------- Boîte de réception admin */ .boite-filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px} .boite-compte{font-size:.85rem;color:var(--gris);margin-left:auto} .boite{list-style:none;margin:0;padding:0;background:var(--blanc);border-radius:12px; box-shadow:var(--ombre);overflow:hidden} .msg{border-bottom:1px solid var(--ligne)} .msg:last-child{border-bottom:0} .msg[hidden]{display:none} .msg-tete{ width:100%;display:grid;grid-template-columns:auto 58px 1fr auto auto 18px; gap:14px;align-items:center;padding:14px 16px;background:none;border:0; font:inherit;text-align:left;cursor:pointer;color:inherit;transition:background .14s; } .msg-tete:hover{background:rgba(0,95,100,.045)} .msg-pastille{width:9px;height:9px;border-radius:50%;background:transparent;flex:0 0 auto} .msg[data-etat="neuf"] .msg-pastille{background:var(--rouge)} .msg[data-etat="neuf"] .msg-nom{font-weight:700} .msg-heure{font-family:var(--sans);font-weight:600;letter-spacing:.03em} .msg-nom{font-family:var(--sans);letter-spacing:.02em} .msg-couverts{font-size:.86rem;color:var(--gris);white-space:nowrap} .msg-fleche{color:#B9C4C3;transition:transform .18s} .msg-tete[aria-expanded="true"] .msg-fleche{transform:rotate(90deg)} .badge-etat{background:#EDEDED;color:#5B5B5B} .msg[data-etat="neuf"] .badge-etat{background:#FBE6DF;color:var(--rouge)} .msg[data-etat="confirme"] .badge-etat{background:#E4F1E4;color:var(--ok)} .msg[data-etat="fait"] .badge-etat{background:#E6EEF1;color:#4A6C7A} .msg-detail{padding:4px 16px 18px 47px;background:#FBFBF9;border-top:1px solid var(--ligne)} .detail-champs{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:14px 0} .detail-champs dt{color:var(--gris);font-size:.86rem} .detail-champs dd{margin:0;font-size:.92rem} .detail-mot{background:var(--blanc);border-left:3px solid var(--lieu,var(--or-clair)); padding:11px 14px;border-radius:0 8px 8px 0;font-size:.93rem;margin:0 0 14px} .detail-mot.vide{color:var(--gris);font-style:italic;border-left-color:var(--ligne)} .msg-actions{display:flex;gap:8px;flex-wrap:wrap} .btn-mini{ border:1.5px solid var(--ligne);background:var(--blanc);color:var(--encre); padding:7px 14px;border-radius:999px;font:inherit;font-size:.85rem;cursor:pointer; transition:border-color .14s,background .14s; } .btn-mini:hover{border-color:var(--vert-clair)} .btn-mini-ok:hover{border-color:var(--ok);background:#F0F7F2} .btn-mini-sup{color:var(--rouge)} .btn-mini-sup:hover{border-color:var(--rouge);background:#FCF1EE} .boite-vide[hidden]{display:none} .boite-vide{padding:36px 16px;text-align:center;color:var(--gris)} /* La suppression met de côté et laisse le temps de se raviser. */ .annuler-barre[hidden]{display:none} .annuler-barre{ position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:200; background:var(--vert-fonce);color:var(--creme);border-radius:999px; padding:11px 14px 11px 20px;display:flex;gap:14px;align-items:center; box-shadow:0 8px 30px rgba(0,0,0,.3);font-size:.9rem; } .annuler-barre button{ background:var(--or-clair);border:0;color:var(--vert-fonce);border-radius:999px; padding:7px 16px;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer; } .annuler-barre button:hover{background:#dbb43a} /* Champs modifiables de l'admin : on tape dedans, ça s'enregistre tout seul. */ .champ-admin{ border:1.5px solid transparent;background:transparent;border-radius:7px; padding:4px 7px;font:inherit;color:inherit;width:100%;transition:border-color .14s,background .14s; } .champ-admin:hover{border-color:var(--ligne);background:var(--blanc)} .champ-admin:focus{outline:none;border-color:var(--vert-clair);background:var(--blanc)} .ligne-dnd .champ-admin.nom{font-family:var(--sans);font-weight:600;letter-spacing:.02em} .ligne-dnd .champ-admin.prix{text-align:right;font-variant-numeric:tabular-nums} .etat-enregistre{ position:fixed;right:18px;bottom:20px;z-index:190;background:var(--ok);color:#fff; padding:9px 16px;border-radius:999px;font-size:.85rem;box-shadow:var(--ombre); opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;pointer-events:none; } .etat-enregistre.on{opacity:1;transform:none} /* ---------------------------------------------------------------- Histoire */ .histoire{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,52px);align-items:start} @media (max-width:820px){.histoire{grid-template-columns:1fr}} .histoire-texte p{font-size:1.02rem} .histoire-chapo{ font-family:var(--sans);font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.4; color:var(--vert);border-left:4px solid var(--or-clair);padding-left:20px;margin-bottom:22px; } .histoire-photo{margin:0} .histoire-photo img{border-radius:var(--rayon);box-shadow:var(--ombre);object-fit:cover} .histoire-photo figcaption{font-size:.85rem;color:var(--gris);margin-top:10px;text-align:center} .jalons{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px;margin-top:clamp(28px,4vw,44px)} .jalon{ background:var(--blanc);border-radius:12px;padding:16px 18px;font-size:.92rem; box-shadow:var(--ombre);border-top:3px solid var(--or-clair); } .jalon-an{display:block;font-family:var(--sans);font-weight:600;font-size:1.3rem; color:var(--vert);margin-bottom:5px;letter-spacing:.04em} /* ======================================================= Administration v2 */ .est-admin{background:#F4F6F5} .admin-flanc{display:flex;flex-direction:column} .admin-qui{ margin:auto 0 0;padding:18px 22px 4px;font-size:.84rem;color:rgba(255,245,233,.6); border-top:1px solid rgba(255,245,233,.12); } .admin-qui b{color:var(--creme)} .admin-qui span{font-size:.78rem} .ecran-tete{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px} .ecran-tete h1{font-size:1.55rem;margin-bottom:6px} .ecran-chapeau{color:var(--gris);max-width:72ch;margin:0;font-size:.95rem} .btn-apercu{margin-left:auto;white-space:nowrap;text-decoration:none} /* Tuiles cliquables du tableau de bord */ .tuiles button.tuile{ border:0;text-align:left;cursor:pointer;font:inherit;display:block;width:100%; transition:transform .12s,box-shadow .16s; } .tuiles button.tuile:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(12,46,49,.08),0 14px 30px rgba(12,46,49,.12)} .tuile .n{display:block;font-family:var(--sans);font-size:1.95rem;font-weight:600;color:var(--vert);line-height:1} .tuile .l{display:block;font-size:.81rem;color:var(--gris);letter-spacing:.06em;text-transform:uppercase;margin-top:6px} .raccourcis{margin-top:30px} .raccourcis h3{font-size:1.05rem;margin-bottom:12px} .raccourcis-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} .raccourci{ background:var(--blanc);border:1.5px solid var(--ligne);border-radius:12px;padding:15px 17px; text-align:left;cursor:pointer;font:inherit;transition:border-color .14s,transform .12s; } .raccourci:hover{border-color:var(--vert-clair);transform:translateY(-2px)} .raccourci b{display:block;font-family:var(--sans);letter-spacing:.02em;margin-bottom:3px} .raccourci span{font-size:.85rem;color:var(--gris)} /* Champs et groupes */ .bloc-champs{background:var(--blanc);border-radius:12px;padding:clamp(18px,2.6vw,26px);box-shadow:var(--ombre);margin-bottom:22px} .bloc-champs .champ{margin-bottom:16px} .bloc-champs .champ:last-child{margin-bottom:0} .champ label{display:block;font-family:var(--sans);font-weight:600;font-size:.9rem;margin-bottom:6px;letter-spacing:.02em} .champ input,.champ select,.champ textarea{ width:100%;padding:10px 13px;border:1.5px solid var(--ligne);border-radius:9px; font:inherit;font-size:.94rem;background:var(--creme);color:var(--encre); } .champ textarea{resize:vertical} .champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--vert-clair);outline-offset:1px;border-color:transparent} .champ-bascule{display:flex;align-items:center;gap:12px} .champ-bascule label{margin:0;font-weight:400;font-size:.93rem} .groupe{ border:1.5px solid var(--ligne);border-radius:12px;padding:6px 18px 18px;margin:0 0 18px; background:#FCFDFC; } .groupe legend{ font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase; color:var(--or);padding:0 8px;font-weight:600; } .groupe-corps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} .groupe-corps .champ{margin-bottom:0} .champ-image{display:flex;gap:12px;align-items:center} .champ-image img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:0 0 auto} .sans-image{font-size:.85rem;color:var(--gris)} /* Listes génériques */ .bloc-liste{background:var(--blanc);border-radius:12px;padding:clamp(16px,2.4vw,24px);box-shadow:var(--ombre);margin-bottom:22px} .bloc-liste h3{font-size:1.08rem;margin-bottom:6px} .bloc-liste .aide{font-size:.87rem;color:var(--gris);margin-bottom:14px} .items{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px} .item{ display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start; padding:12px;border:1.5px solid var(--ligne);border-radius:10px;background:#FCFDFC; } .item.glisse{opacity:.4} .item-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;align-items:center} .item-champs input,.item-champs select,.item-champs textarea{ width:100%;padding:8px 11px;border:1.5px solid var(--ligne);border-radius:8px; font:inherit;font-size:.9rem;background:var(--blanc); } .item-champs textarea{resize:vertical} .item-champs .meta{font-size:.84rem;color:var(--gris)} .col-image{display:flex;gap:8px;align-items:center} .col-image img{width:40px;height:40px;object-fit:cover;border-radius:6px} .liste-vide{color:var(--gris);font-size:.92rem;padding:10px 0} .btn-ajout{border-style:dashed} /* Le tableau général de la carte */ .carte-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px} #filtre-produits{ padding:9px 14px;border:1.5px solid var(--ligne);border-radius:999px;font:inherit; font-size:.9rem;background:var(--blanc);min-width:220px; } .table-carte-boite{background:var(--blanc);border-radius:12px;box-shadow:var(--ombre);overflow:auto} .table-carte{width:100%;border-collapse:collapse;min-width:900px} .table-carte th{ background:var(--vert-fonce);color:var(--creme);text-align:left;padding:10px 12px; font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; font-weight:600;position:sticky;top:0;z-index:2; } .table-carte th span{display:block;font-size:.64rem;letter-spacing:.06em;opacity:.6;text-transform:none;font-weight:400;margin-top:2px} .th-sr{border-bottom:3px solid #C9A227} .th-pp{border-bottom:3px solid #C0673F} .table-carte td{padding:9px 12px;border-bottom:1px solid var(--ligne);vertical-align:top} .table-carte tr:last-child td{border-bottom:0} .table-carte tr.glisse{opacity:.4} .table-carte tr[hidden]{display:none} .col-poignee{width:24px;padding-top:14px!important} .col-produit{min-width:250px} .col-produit input,.col-produit textarea,.col-cat select{ width:100%;padding:7px 10px;border:1.5px solid transparent;border-radius:7px; font:inherit;font-size:.92rem;background:transparent; } .col-produit input:hover,.col-produit textarea:hover,.col-cat select:hover{border-color:var(--ligne);background:var(--blanc)} .col-produit input:focus,.col-produit textarea:focus,.col-cat select:focus{outline:none;border-color:var(--vert-clair);background:var(--blanc)} .cp-nom{font-family:var(--sans);font-weight:600;letter-spacing:.02em} .cp-desc{font-size:.85rem!important;color:var(--gris);resize:vertical} .col-cat{width:160px} .col-etiq{width:190px} .chip{ border:1.5px solid var(--ligne);background:var(--blanc);color:var(--gris);border-radius:999px; padding:4px 10px;font:inherit;font-size:.74rem;cursor:pointer;margin:0 4px 4px 0; transition:background .14s,color .14s,border-color .14s; } .chip:hover{border-color:var(--vert-clair)} .chip.on{background:var(--vert);border-color:var(--vert);color:var(--creme)} .col-lieu{width:170px} .prix-lieu{display:flex;align-items:center;gap:7px} .prix-lieu input{ width:84px;padding:7px 9px;border:1.5px solid var(--ligne);border-radius:7px; font:inherit;font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums;background:var(--blanc); } .prix-lieu .unite{color:var(--gris);font-size:.88rem} .col-lieu.pas-servi{background:#FAFAF9} .col-lieu.pas-servi input{opacity:.4;text-decoration:line-through} .item.retire,.plat-admin.retire{opacity:.5} /* Médiathèque */ .galerie-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} .media{margin:0;background:var(--blanc);border-radius:10px;overflow:hidden;box-shadow:var(--ombre)} .media img{aspect-ratio:1;object-fit:cover;width:100%} .media figcaption{padding:9px 11px;font-size:.83rem} .media .poids{display:block;color:var(--gris);font-size:.76rem} /* Traductions */ .trad-tete,.trad{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px} .trad-tete{ font-family:var(--sans);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; color:var(--or);margin-bottom:10px;padding:0 4px;font-weight:600; } .trads{display:grid;gap:10px} .trad{background:var(--blanc);border-radius:10px;padding:12px;box-shadow:var(--ombre);align-items:start} .trad-src{font-size:.92rem} .trad-ou{display:block;font-size:.75rem;color:var(--gris);margin-top:4px;letter-spacing:.04em} .trad textarea{ width:100%;padding:8px 11px;border:1.5px solid var(--ligne);border-radius:8px; font:inherit;font-size:.9rem;background:var(--creme);resize:vertical; } @media (max-width:860px){ .trad-tete{display:none} .trad{grid-template-columns:1fr} } /* ------------------------------------------------------ Sélecteur de langue */ .selecteur-langue{display:inline-flex;gap:2px;margin-left:8px;background:rgba(255,245,233,.12); border:1px solid rgba(255,245,233,.22);border-radius:999px;padding:2px} .btn-langue{ background:none;border:0;color:var(--creme);font:inherit;font-size:.78rem; letter-spacing:.06em;padding:6px 11px;border-radius:999px;cursor:pointer;opacity:.7; transition:background .14s,opacity .14s; } .btn-langue:hover{opacity:1;background:rgba(255,245,233,.14)} .btn-langue[aria-pressed="true"]{background:var(--creme);color:var(--vert-fonce);opacity:1;font-weight:600} /* Curseurs de rendu et aperçu */ .champ-curseur{display:flex;align-items:center;gap:12px} .champ-curseur input[type="range"]{flex:1;padding:0;background:transparent;border:0} .champ-curseur output{ font-family:var(--sans);font-weight:600;font-size:.9rem;min-width:52px;text-align:right; color:var(--vert);font-variant-numeric:tabular-nums; } .apercu-fond-boite{margin-top:16px} .apercu-fond-boite img{ width:100%;max-height:190px;object-fit:cover;border-radius:10px; transition:filter .12s linear; } .apercu-fond-boite .aide{font-size:.84rem;color:var(--gris);margin:8px 0 0} .champ-couleur{display:flex;align-items:center;gap:12px} .champ-couleur input[type="color"]{ width:52px;height:38px;padding:2px;border:1.5px solid var(--ligne); border-radius:9px;background:var(--blanc);cursor:pointer; } .champ-couleur code{font-size:.85rem;color:var(--gris);letter-spacing:.04em} .btn-langue{display:inline-flex;align-items:center;gap:6px} .btn-langue .drapeau{font-size:1.02rem;line-height:1} .btn-langue .code-langue{font-size:.72rem;letter-spacing:.08em} .jauges-trad{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:16px} .jauge{background:var(--blanc);border-radius:10px;padding:14px 16px;box-shadow:var(--ombre)} .jauge b{display:block;font-size:.92rem;margin-bottom:8px} .jauge .barre{height:8px;background:var(--ligne);border-radius:999px;overflow:hidden} .jauge .barre span{display:block;height:100%;background:var(--ok);border-radius:999px;transition:width .3s} .jauge-val{display:block;font-size:.82rem;color:var(--gris);margin-top:6px;text-align:right} #filtre-trad{padding:9px 14px;border:1.5px solid var(--ligne);border-radius:999px;font:inherit; font-size:.9rem;background:var(--blanc);min-width:260px;margin-bottom:14px} .trad[hidden]{display:none} /* ======================================================== Mode d'emploi Des bulles cyan qui FLOTTENT au-dessus du site pendant une démonstration. Le cyan n'existe nulle part dans la charte WILD (vert canard, crème, doré) : la confusion avec un contenu destiné aux clients est impossible. La bulle pose son propre fond translucide avant la teinte cyan. Sans ce blanc, elle serait illisible sur la section vert foncé — une couleur translucide seule prend la couleur de ce qu'il y a dessous. */ :root{ --note-cyan:#00D5F0; --note-cyan-vif:#4DF7FF; } .note-demo{ position:absolute;z-index:60;display:none;margin:0;padding:19px 22px 18px 24px; width:min(520px, calc(100vw - 48px)); /* Cyan vif et franchement translucide. La couche sombre posée DESSOUS n'est pas décorative : sans elle, un cyan clair sur fond crème ne porte pas de texte blanc — le contraste tombe sous 2:1 et la bulle devient illisible. Avec elle, le cyan reste vif et le blanc tient. */ background: linear-gradient(135deg, rgba(139,252,255,.50), rgb(0 206 255 / 50%) 55%, rgba(0,213,240,.28)), rgba(4,58,74,.50); border:1.5px solid rgba(139,252,255,1); border-radius:18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 36px rgba(139,252,255,.34), 0 0 38px rgba(77,247,255,.7), 0 22px 50px rgba(0,150,185,.34), 0 6px 16px rgba(12,46,49,.16); backdrop-filter:blur(2px) saturate(2.2) brightness(.62); -webkit-backdrop-filter:blur(2px) saturate(2.2) brightness(.62); font-family:var(--lire);font-size:.9rem;line-height:1.58; color:#fff; text-shadow:0 1px 2px rgba(0,26,34,.95), 0 2px 14px rgba(0,26,34,.8); animation:note-flotte 5.5s ease-in-out infinite alternate; } /* Un reflet en haut : c'est ce qui fait lire la surface comme du verre. */ .note-demo::after{ content:"";position:absolute;inset:1px 1px auto 1px;height:44%; border-radius:17px 17px 40% 40%/17px 17px 100% 100%; background:linear-gradient(180deg, rgba(255,255,255,.26), transparent); pointer-events:none; } @keyframes note-flotte{ from{ transform:translateY(0) } to { transform:translateY(-5px) } } /* La pastille de l'emoji, en relief et lumineuse. */ .note-demo::before{ content:"🤓"; position:absolute;top:-17px;left:-15px;z-index:2; width:38px;height:38px;display:grid;place-items:center; background:radial-gradient(circle at 34% 30%, #8BFCFF, var(--note-cyan-vif) 45%, var(--note-cyan) 80%); border:1.5px solid rgba(255,255,255,.9); border-radius:50%;font-size:1.12rem; box-shadow:0 0 28px rgba(0,235,255,.95), 0 6px 14px rgba(0,190,220,.55); } .note-demo p{margin:0;position:relative;z-index:1} .note-demo p + p{margin-top:9px} .note-demo b,.note-demo strong{color:#fff;font-weight:700} .note-demo code{ background:rgba(3,40,50,.5);padding:1px 7px;border-radius:5px; font-size:.86em;color:#CFFAFE; } .note-demo .note-titre{ display:block;position:relative;z-index:1; font-family:var(--sans);font-weight:600;font-size:.72rem; letter-spacing:.16em;text-transform:uppercase;color:#A8FCFF;margin-bottom:7px; } /* Par défaut le site est NU : le mode d'emploi s'allume à la demande. */ body.mode-emploi .note-demo{display:block} /* Le corps sert de repère de positionnement aux bulles. */ body{position:relative} /* Variante compacte, pour commenter un élément précis. */ .note-demo.note-mini{ margin:0;padding:13px 16px 12px 18px;font-size:.84rem;line-height:1.5; width:min(430px, calc(100vw - 48px)); border-radius:14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 26px rgba(0,235,255,.5), 0 12px 30px rgba(0,150,185,.3), 0 3px 8px rgba(12,46,49,.14); animation-duration:6.5s; } .note-demo.note-mini::before{ width:29px;height:29px;font-size:.88rem;top:-13px;left:-11px; box-shadow:0 0 16px rgba(34,211,238,.8), 0 4px 10px rgba(6,182,212,.45); } .note-demo.note-mini::after{border-radius:13px 13px 40% 40%/13px 13px 100% 100%} .note-demo.note-mini .note-titre{font-size:.66rem;margin-bottom:4px} .bouton-notes{ position:fixed;top:14px;right:16px;z-index:300; background:linear-gradient(135deg, var(--note-cyan-vif), var(--note-cyan)); border:1.5px solid rgba(255,255,255,.75);color:#04262D; font:inherit;font-weight:600;font-size:.84rem; padding:9px 18px;border-radius:999px;cursor:pointer; box-shadow:0 0 22px rgba(34,211,238,.7), 0 6px 18px rgba(6,182,212,.45); transition:box-shadow .16s,transform .12s; } .bouton-notes:hover{box-shadow:0 0 24px rgba(34,211,238,.9), 0 3px 12px rgba(6,182,212,.5);transform:translateY(-1px)} body.mode-emploi .bouton-notes{background:#04262D;color:var(--note-cyan-vif)} @media (prefers-reduced-motion:reduce){ .note-demo{animation:none} .bouton-notes{transition:none} } /* Sélecteur d'images du bandeau */ /* Un champ qui prend toute la largeur du groupe, quelle que soit la grille. */ .groupe-corps .champ-large,.bloc-champs .champ-large{grid-column:1/-1} /* Les vignettes tiennent sur une ligne tant qu'il y a la place ; au-delà, elles passent à la suivante plutôt que de rétrécir jusqu'à l'illisible. */ .choix-images{display:flex;flex-wrap:wrap;gap:10px} .choix-images .vignette{flex:0 0 118px} .vignette{ position:relative;padding:0;border:2.5px solid var(--ligne);border-radius:10px; background:var(--blanc);cursor:pointer;overflow:hidden;font:inherit; transition:border-color .14s,transform .12s; } .vignette:hover{border-color:var(--vert-clair);transform:translateY(-2px)} .vignette img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .vignette-nom{display:block;padding:6px 8px;font-size:.74rem;color:var(--gris);text-align:left;line-height:1.3} .vignette.on{border-color:var(--vert)} .vignette-rang{ position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%; background:var(--vert);color:var(--creme);font-family:var(--sans);font-weight:600; font-size:.78rem;display:grid;place-items:center;opacity:0;transition:opacity .14s; } .vignette.on .vignette-rang{opacity:1} /* Une bulle se saisit : le curseur le dit, et elle se détache pendant le geste. */ .note-demo{cursor:grab;touch-action:none;user-select:none} .note-demo:active{cursor:grabbing} .note-demo.deplace{ cursor:grabbing;animation:none;z-index:200; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 40px rgba(34,211,238,.7), 0 28px 60px rgba(6,120,150,.5); transform:scale(1.015); } /* Sur petit écran, le bouton fixe recouvrait le bandeau de proposition : il se réduit à l'emoji, et le bandeau lui laisse la place. */ @media (max-width:700px){ .bouton-notes::before{content:"🤓";font-size:1.05rem} .demo-bandeau{padding-right:64px} } /* Les outils de démonstration, empilés en haut à droite. Les regrouper évite de caler la position du second sur la hauteur du premier, qui change avec son libellé. */ .outils-demo{ position:fixed;top:14px;right:16px;z-index:300; display:flex;flex-direction:column;align-items:stretch;gap:8px; } /* Les deux boutons partagent exactement la même boîte : même largeur, même hauteur, même alignement du texte. */ .outils-demo > *{ display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:38px;padding:0 18px;border-radius:999px; font-family:var(--lire);font-weight:600;font-size:.8rem;line-height:1; text-decoration:none;cursor:pointer;box-sizing:border-box; } .outils-demo .bouton-notes{position:static;top:auto;right:auto;padding:0 18px} .bouton-admin{ background:rgba(12,46,49,.92);border:1.5px solid rgba(255,245,233,.45); color:var(--creme); box-shadow:0 6px 18px rgba(12,46,49,.35); backdrop-filter:blur(6px);transition:background .16s,transform .12s; } .bouton-admin:hover{background:var(--vert);transform:translateY(-1px)} @media (max-width:700px){ .outils-demo{top:10px;right:10px;gap:6px} .outils-demo > *{min-height:40px;width:44px;padding:0;font-size:0} .bouton-admin::before{content:"🖥️";font-size:1.05rem} } /* ---------------------------------------- Champs dimensionnés à leur contenu Un menu déroulant à deux options, un champ d'heure ou un nombre à deux chiffres n'ont aucune raison d'occuper toute la colonne : ça donne un formulaire de cases vides où l'œil ne trouve plus l'information. */ .champ select,.item-champs select,.col-cat select{ width:auto;max-width:100%;min-width:0; padding-right:32px; /* la flèche native a besoin de sa place */ } .champ input[type="number"]{width:auto;min-width:92px;max-width:150px} .champ input[type="time"]{width:auto;min-width:118px} .champ input[type="date"]{width:auto;min-width:150px} .item-champs input[type="number"]{width:auto;min-width:78px;max-width:120px} .item-champs input[type="time"],.item-champs input[type="date"]{width:auto;min-width:0} /* Une ligne de liste ne force plus toutes ses colonnes à la même largeur : chaque champ prend ce qu'il lui faut. */ .item-champs{grid-template-columns:none;display:flex;flex-wrap:wrap;gap:9px;align-items:center} .item-champs > input[type="text"],.item-champs > textarea{flex:1 1 180px;min-width:150px} .item-champs > .col-image{flex:0 0 auto} /* Le groupe qui contient le sélecteur d'images passe en rangée : les vignettes prennent ce qu'il leur faut, les réglages se placent à leur droite. Ils sont assez compacts pour ça depuis qu'ils ne s'étirent plus. */ .groupe-corps:has(.choix-images){ display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px; } .groupe-corps:has(.choix-images) .champ{flex:0 0 auto;margin:0} .groupe-corps:has(.choix-images) .champ-large{flex:0 1 auto;grid-column:auto} .groupe-corps:has(.choix-images) .choix-images{max-width:100%} /* Les vignettes se resserrent un peu pour laisser la place aux réglages. */ .groupe-corps:has(.choix-images) .vignette{flex:0 0 96px} /* Un champ ne doit pas être élargi par son texte d'aide. */ .groupe-corps:has(.choix-images) .champ{max-width:210px} .groupe-corps:has(.choix-images) .champ-large{max-width:none} .groupe-corps:has(.choix-images) .vignette-nom{font-size:.7rem;padding:5px 7px} .groupe-corps:has(.choix-images) select{max-width:210px} /* Choix des langues proposées */ .choix-langues{display:flex;gap:10px;flex-wrap:wrap} .lang{ display:flex;flex-direction:column;align-items:center;gap:3px; border:2px solid var(--ligne);background:var(--blanc);border-radius:12px; padding:10px 16px;font:inherit;cursor:pointer;min-width:104px; transition:border-color .14s,transform .12s; } .lang:hover:not(:disabled){border-color:var(--vert-clair);transform:translateY(-1px)} .lang.on{border-color:var(--vert);background:#F2F8F7} .lang-drapeau{font-size:1.25rem;line-height:1} .lang-nom{font-family:var(--sans);font-weight:600;font-size:.88rem} .lang-etat{font-size:.72rem;color:var(--gris);letter-spacing:.03em} .lang.on .lang-etat{color:var(--ok)} .lang:disabled{opacity:.5;cursor:not-allowed} .lang.pas-prete .lang-etat{color:var(--rouge)} /* ------------------------------------------- Langue d'édition d'un écran */ .langue-edition{ display:inline-flex;align-items:center;gap:4px;margin-left:auto; background:var(--blanc);border:1.5px solid var(--ligne);border-radius:999px;padding:4px 6px; } .langue-edition-lib{ font-size:.74rem;color:var(--gris);letter-spacing:.08em;text-transform:uppercase; padding-inline:6px; } .bt-lang{ border:0;background:none;border-radius:999px;padding:6px 10px;cursor:pointer; font-size:1rem;line-height:1;opacity:.45;transition:opacity .14s,background .14s; } .bt-lang:hover{opacity:.8;background:var(--creme)} .bt-lang.on{opacity:1;background:var(--vert);box-shadow:0 2px 8px rgba(0,95,100,.3)} /* La version de référence, sous le champ à traduire. Sans elle, on traduit à l'aveugle. */ .ref-langue{ font-size:.83rem;color:var(--gris);margin:6px 0 0;padding:7px 10px; background:#F4F7F6;border-radius:8px;border-left:3px solid var(--ligne); } .ref-langue span{ display:inline-block;font-family:var(--sans);font-size:.64rem;font-weight:600; letter-spacing:.12em;color:var(--vert);background:var(--blanc); padding:1px 6px;border-radius:4px;margin-right:7px; } .ref-langue.a-traduire{border-left-color:var(--or-clair);background:#FFFBF2} .ref-langue em{color:var(--or);font-style:normal;font-size:.78rem} .pastille-nolang{ font-family:var(--lire);font-weight:400;font-size:.7rem;color:var(--gris); background:var(--creme-ombre);padding:2px 8px;border-radius:999px;margin-left:8px; letter-spacing:.02em;text-transform:none; } /* ------------------------------------------------- Comptes et droits Une carte par compte, repliée sur une ligne : qui, quel rôle, combien de rubriques. Elle s'ouvre pour éditer. Les droits sont des PASTILLES qu'on allume, regroupées comme le menu de l'administration — on reconnaît d'un coup d'œil ce qui est ouvert et ce qui ne l'est pas. */ .comptes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .compte{ background:var(--blanc);border-radius:14px;box-shadow:var(--ombre); border:1.5px solid transparent;transition:border-color .16s,box-shadow .16s; } .compte:hover{border-color:rgba(62,143,140,.35)} .compte.inactif{background:#F6F3EE} .compte.inactif .compte-tete{opacity:.62} .compte-tete{ display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:14px 18px; } .compte-tete .compte-avatar{flex:0 0 44px} .compte-tete .compte-ident{flex:1 1 180px} .compte-tete .badge,.compte-tete .compte-resume,.compte-tete .btn-mini{flex:0 0 auto;white-space:nowrap} .compte-tete .btn-mini{min-width:92px;text-align:center} .compte-avatar{ width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:var(--vert);color:var(--creme);font-family:var(--sans);font-weight:600; font-size:.95rem;letter-spacing:.04em; } .compte.inactif .compte-avatar{background:#9AA8A8} .compte-ident{display:flex;flex-direction:column;min-width:0} .compte-ident b{font-family:var(--sans);font-weight:600;letter-spacing:.02em;font-size:1.02rem} .compte-ident .meta{font-size:.84rem;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .compte-resume{font-size:.85rem;color:var(--gris);white-space:nowrap} .compte-tete .badge{white-space:nowrap} .badge-super{background:var(--vert-fonce);color:var(--or-clair)} .badge-staff{background:#E5F0EF;color:var(--vert)} .badge-off{background:#EDE6DA;color:#7A6F5A} .compte-edit{padding:4px 22px 22px;border-top:1px solid var(--ligne);margin:0 0 0} .compte-edit[hidden]{display:none} .compte-grille{ display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px; padding-top:20px; } .compte-grille .champ{margin:0;display:block} .compte-grille .champ span{ display:block;font-family:var(--sans);font-weight:600;font-size:.8rem; letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:6px; } .compte-grille .champ input,.compte-grille .champ select{ width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--ligne); border-radius:9px;font:inherit;background:var(--creme);color:var(--encre); } .compte-grille .champ input:focus,.compte-grille .champ select:focus{ outline:2px solid var(--vert-clair);outline-offset:1px;border-color:transparent;background:var(--blanc); } .compte-verrou{margin:14px 0 0;padding:10px 14px;background:#FFF8E8;border-radius:9px;color:#5E5533} .compte-super-note{ margin:18px 0 0;padding:14px 16px;border-radius:10px;background:var(--vert-fonce); color:rgba(255,245,233,.88);font-size:.9rem; } .compte-droits{margin-top:22px} .droits-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px} .droits-tete h4{ margin:0;font-family:var(--sans);font-size:.8rem;letter-spacing:.1em; text-transform:uppercase;color:var(--vert); } .droits-boutons{display:flex;gap:6px} .droits-grille{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 26px; margin-top:14px; } .droits-groupe h5{ margin:0 0 9px;padding:0 0 7px;border-bottom:1.5px solid var(--ligne); display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or); } .droits-groupe h5 button{ border:0;background:none;padding:2px 4px;font:inherit;font-size:.72rem;letter-spacing:.06em; text-transform:none;color:var(--vert);cursor:pointer;text-decoration:underline;text-underline-offset:2px; } .droits-groupe h5 button:hover{color:var(--vert-fonce)} .droits-groupe{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start} .droits-groupe h5{flex:0 0 100%} .droit{ display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none; padding:7px 13px 7px 11px;border-radius:999px;font-size:.86rem;line-height:1.2; border:1.5px solid var(--ligne);background:var(--blanc);color:var(--gris); transition:background .14s,border-color .14s,color .14s; } .droit input{position:absolute;opacity:0;pointer-events:none} .droit::before{ content:"";width:15px;height:15px;border-radius:50%;flex:0 0 auto; border:1.5px solid #B9C4C3;background:var(--blanc);box-sizing:border-box; transition:background .14s,border-color .14s; } .droit:hover{border-color:var(--vert-clair)} .droit:has(input:checked){background:#E5F0EF;border-color:var(--vert);color:var(--vert-fonce);font-weight:600} .droit:has(input:checked)::before{ background:var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; border-color:var(--vert); } .droit:has(input:focus-visible){outline:2px solid var(--vert-clair);outline-offset:2px} .droit.forcee{opacity:.72;cursor:default} .droit-note{font-style:normal;font-size:.72rem;color:var(--gris);margin-left:2px} .compte-actions{ display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px; padding-top:16px;border-top:1px solid var(--ligne); } .compte-actions .aide{margin:0;font-size:.82rem;color:var(--gris);flex:1 1 260px} .compte-actions .btn-mini[disabled]{opacity:.4;cursor:not-allowed} .compte-tete .btn-mini{margin-left:auto} @media (max-width:760px){ .compte-edit{padding-inline:16px} /* Deux lignes bien rangées : l'identité seule en haut, puis le rôle, le résumé et le bouton, celui-ci toujours calé à droite. */ .compte-tete .compte-ident{flex:1 1 calc(100% - 60px)} .compte-tete .compte-ident .meta{white-space:normal} .compte-tete .compte-avatar{margin-right:0} } .comptes-barre{display:flex;align-items:center;gap:14px;margin-bottom:14px} .comptes-compte{font-size:.85rem;color:var(--gris)} /* --------------------------------------------- Sélecteur d'image */ .selimg{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0;width:100%} .selimg-vue{ width:100%;max-width:280px;aspect-ratio:16/9;border-radius:10px;overflow:hidden; background:var(--creme-ombre);display:grid;place-items:center;border:1.5px solid var(--ligne); } .selimg-vue img{width:100%;height:100%;object-fit:cover;display:block} .selimg-vue .sans-image{font-size:.85rem;color:var(--gris)} .selimg-actions{display:flex;flex-wrap:wrap;gap:8px} .selimg-actions [hidden]{display:none} .selimg-envoi{position:relative;cursor:pointer;display:inline-block} .selimg-grille{ display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;width:100%; padding:12px;background:var(--creme);border-radius:12px;border:1.5px solid var(--ligne); max-height:340px;overflow:auto;box-sizing:border-box; } .selimg-grille[hidden]{display:none} .item-champs .selimg-vue{max-width:150px} .media-sup{display:block;margin-top:8px;font-size:.78rem;padding:4px 10px} /* --- Groupes de champs : ce qui n'est pas un champ de saisie occupe sa ligne --- */ .groupe-corps .champ-bascule, .groupe-corps .champ:has(.selimg){grid-column:1/-1} .champ-bascule{padding:4px 0} .pastille-nolang{white-space:nowrap;display:inline-block;vertical-align:middle} .champ label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px} .champ-bascule label{display:block} /* Le sélecteur d'image en pleine ligne : l'aperçu à gauche, les gestes à droite, la grille de la médiathèque dessous sur toute la largeur. */ .champ:has(.selimg) .selimg{ display:grid;grid-template-columns:minmax(0,240px) auto;gap:12px 18px;align-items:start;justify-content:start; } .champ:has(.selimg) .selimg-vue{max-width:none} .champ:has(.selimg) .selimg-actions{flex-direction:column;align-items:stretch;min-width:170px} .champ:has(.selimg) .selimg-actions .btn-mini{text-align:center} .champ:has(.selimg) .selimg-grille{grid-column:1/-1} @media (max-width:560px){ .champ:has(.selimg) .selimg{grid-template-columns:1fr} .champ:has(.selimg) .selimg-actions{flex-direction:row;flex-wrap:wrap} } /* Le bouton d'envoi est un