/* Polices auto-hébergées,sous-ensemblées au jeu latin et aux signes utilisés. Licence SIL Open Font License 1.1 — Spectral (Production Type),Archivo (Omnibus Type). Total : 68 ko. */ @font-face{ font-family:"Archivo"; font-style:normal; font-weight:400 600; font-display:swap; src:url("polices/archivo-var.woff2") format("woff2-variations"); } @font-face{ font-family:"Spectral"; font-style:normal; font-weight:400; font-display:swap; src:url("polices/spectral-400.woff2") format("woff2"); } @font-face{ font-family:"Spectral"; font-style:normal; font-weight:500; font-display:swap; src:url("polices/spectral-500.woff2") format("woff2"); } @font-face{ font-family:"Spectral"; font-style:normal; font-weight:600; font-display:swap; src:url("polices/spectral-600.woff2") format("woff2"); } @font-face{ font-family:"Spectral"; font-style:normal; font-weight:700; font-display:swap; src:url("polices/spectral-700.woff2") format("woff2"); } /* ================================================================== AUXYS — charte web Reprise du système graphique des présentations Auxys : titres sérif teal en capitales,bandeaux pleins teal / sable / vert profond,blocs à filet latéral sur fonds teintés. ================================================================== */ :root{ --teal: #2C988E; --teal-fonce: #22796F; --teal-texte: #1C6A62; /* teal assombri, lisible en petit corps */ --teal-profond:#245A50; --nuit: #1B3F38; --nuit-plus: #12302B; --sable: #C9A96E; --sable-fonce: #8F6A1F; --sable-clair: #E3C994; /* titres sur fond sombre : tient le seuil de 4,5:1 */ --teal-tint: #EAF5F4; --sable-tint: #FDF3E6; --encre: #1E3A35; --gris: #5A6E6A; --gris-clair: #667B77; --papier: #FBFCFB; --blanc: #FFFFFF; --filet: rgba(30,58,53,.12); --filet-clair: rgba(255,255,255,.20); --marge: clamp(1.15rem, 4vw, 4.5rem); --largeur: 82rem; --serif: "Spectral", Georgia, "Times New Roman", serif; --sans: "Archivo", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; } @media (prefers-reduced-motion:reduce){html{ scroll-behavior:auto; } } body{ margin:0; background:var(--papier); color:var(--encre); font-family:var(--sans); font-size:1rem; line-height:1.66; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } svg{ display:block; } /* Le sable ne donne que 2,19:1 sur les fonds clairs,sous le seuil de 3:1 exige pour un indicateur de focus. Il reste employe sur les fonds sombres,ou il atteint 4,9:1. */ /* Anneau a deux cercles. Une seule couleur ne peut pas tenir le seuil de 3:1 partout : le sable se perd sur les fonds clairs (2,18:1), le sable fonce se perd sur le bouton teal (1,05:1). Un cercle blanc a l'interieur et un cercle nuit a l'exterieur donnent au moins 5,17:1 sur chacune des surfaces du site — papier, blanc, teinte, bouton teal, bouton sable, bande nuit. Mesure refaite par le controle navigateur. */ :focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; box-shadow:0 0 0 5px var(--nuit); } .saut{ position:absolute; left:-9999px; background:var(--nuit); color:#fff; padding:.75rem 1rem; z-index:200; } .saut:focus{ left:1rem; top:.5rem; } /* ---------- typographie ---------- */ h1,h2,h3,h4{ font-family:var(--serif); margin:0; line-height:1.16; font-weight:600; } h1{ font-size:clamp(2.15rem,4.6vw,3.7rem); line-height:1.08; font-weight:700; letter-spacing:-.012em; text-wrap:balance; } h2{ font-size:clamp(1.5rem,2.5vw,2.15rem); font-weight:700; text-transform:uppercase; letter-spacing:.005em; color:var(--teal); text-wrap:balance; } .bande--nuit h2,.hero h2{ color:var(--blanc); } h3{ font-size:clamp(1.12rem,1.35vw,1.28rem); } h4{ font-size:1.02rem; font-weight:600; } p{ margin:0 0 1rem; } p:last-child{ margin-bottom:0; } .chapeau{ font-family:var(--serif); font-size:clamp(1.05rem,1.25vw,1.2rem); line-height:1.62; color:var(--gris); } .filet-titre{ width:100%; height:1px; background:var(--sable); margin:1rem 0 2rem; opacity:.55; } /* ---------- ossature ---------- */ .enveloppe{ max-width:var(--largeur); margin-inline:auto; padding-inline:var(--marge); } .bande{ padding-block:clamp(3.25rem,6vw,5.5rem); } .bande--blanc{ background:var(--blanc); } .bande--tint{ background:var(--teal-tint); } .bande--nuit{ background:var(--nuit); color:#fff; } .bande--nuit .chapeau{ color:rgba(255,255,255,.78); } /* ---------- logo ---------- */ .logo{ text-decoration:none; color:inherit; } .logo__mark .contour{ stroke:var(--teal); } .logo__nom{ font-family:var(--serif); color:var(--teal); } .logo__sign{ font-family:var(--serif); color:var(--sable); } .bande--nuit .logo__mark .contour,.pied .logo__mark .contour{ stroke:#fff; } .bande--nuit .logo__nom,.pied .logo__nom{ color:#fff; } /* ---------- en-tête ---------- */ .entete{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.97); border-bottom:1px solid var(--filet); transition:box-shadow .25s ease; } .entete.defile{ box-shadow:0 1px 16px rgba(30,58,53,.09); } .entete__int{ max-width:var(--largeur); margin-inline:auto; padding:0 var(--marge); height:var(--entete); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .menu{ display:flex; align-items:stretch; height:var(--entete); } .menu__item{ position:relative; display:flex; align-items:center; } .menu__lien{ font-family:var(--sans); font-size:.93rem; font-weight:500; color:var(--encre); text-decoration:none; padding:0 clamp(.6rem,1.1vw,1rem); height:100%; display:flex; align-items:center; gap:.35rem; background:none; border:0; margin:0; cursor:pointer; border-bottom:2px solid transparent; line-height:1; transition:color .18s ease, border-color .18s ease; } .menu__lien:hover,.menu__item.ouvert .menu__lien{ color:var(--teal-texte); border-bottom-color:var(--teal); } .menu__fleche{ width:.5rem; height:.5rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s ease; } .menu__item.ouvert .menu__fleche{ transform:rotate(-135deg) translate(-3px,-3px); } /* méga-menu */ .mega{ position:absolute; top:var(--entete); left:50%; transform:translateX(-50%) translateY(-8px); background:var(--blanc); border:1px solid var(--filet); border-top:3px solid var(--teal); box-shadow:0 18px 40px rgba(30,58,53,.13); padding:1.5rem; min-width:min(46rem,88vw); display:grid; gap:.35rem 2rem; grid-template-columns:repeat(2,minmax(0,1fr)); opacity:0; visibility:hidden; pointer-events:none; /* La visibilite bascule d'un coup,jamais en fondu : a l'ouverture elle passe tout de suite,sinon la tabulation lancee dans la foulee d'un appui sur Entree sautait le panneau pendant deux dixiemes de seconde et sortait du menu. A la fermeture elle attend la fin du fondu. */ transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } @media (min-width:76rem){.mega{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .menu__item.ouvert .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); transition:opacity .2s ease, transform .2s ease, visibility 0s; } .mega a{ display:block; text-decoration:none; color:var(--encre); padding:.6rem .7rem; border-left:2px solid transparent; transition:background .16s ease, border-color .16s ease; } .mega a:hover{ background:var(--teal-tint); border-left-color:var(--sable); } .mega strong{ display:block; font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--teal-texte); } .mega span{ display:block; font-size:.84rem; color:var(--gris); line-height:1.42; margin-top:.15rem; } @media (max-width:67rem){.menu{ display:none; } } /* bouton burger + panneau mobile */ .burger{ display:none; background:none; border:1px solid var(--filet); padding:.5rem .6rem; cursor:pointer; } .burger span{ display:block; width:1.15rem; height:1.5px; background:var(--encre); margin:.22rem 0; transition:transform .2s ease, opacity .2s ease; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } @media (max-width:67rem){.burger{ display:block; } } .panneau{ display:none; border-top:1px solid var(--filet); background:var(--blanc); max-height:calc(100vh - var(--entete)); /* dvh suit la barre d'outils mobile, que vh ignore : sans cette ligne les deux dernieres entrees du panneau passaient sous la barre d'adresse. */ max-height:calc(100dvh - var(--entete)); overflow:auto; } .panneau.actif{ display:block; } .panneau a{ display:block; padding:.85rem var(--marge); color:var(--encre); text-decoration:none; border-bottom:1px solid var(--filet); font-size:.97rem; } /* Les cinq pages d'expertise sont decalees. Sans libellé au-dessus, elles semblaient dependre de l'entree « Accueil » qui les precede, alors que l'en-tete large les groupe sous « Nos expertises ». */ .panneau__groupe{ display:block; padding:.95rem var(--marge) .35rem; font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-texte); border-bottom:1px solid var(--filet); } .panneau a.sous{ padding-left:calc(var(--marge) + 1rem); color:var(--gris); font-size:.9rem; } /* ---------- boutons ---------- */ .btn{ display:inline-block; font-family:var(--sans); font-size:.94rem; font-weight:600; padding:.72rem 1.5rem; text-decoration:none; cursor:pointer; border:1px solid var(--teal-fonce); background:var(--teal-fonce); color:#fff; transition:background .18s ease, border-color .18s ease, color .18s ease; } .btn:hover{ background:var(--teal-texte); border-color:var(--teal-texte); } .btn--vide{ background:transparent; color:var(--teal-texte); border-color:var(--teal-fonce); } .btn--vide:hover{ background:var(--teal-fonce); color:#fff; } .btn--clair{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); } .btn--clair:hover{ background:#fff; color:var(--nuit); border-color:#fff; } .entete .btn{ padding:.55rem 1.1rem; font-size:.9rem; } @media (max-width:34rem){.entete .btn{ display:none; } } /* ---------- hero ---------- */ .hero{ position:relative; overflow:hidden; background:var(--nuit); color:#fff; padding-block:clamp(3.5rem,8vw,6.5rem); } .hero__fond{ position:absolute; inset:0; overflow:hidden; } .hero__geo{ position:absolute; inset:0; width:100%; height:100%; } .hero .enveloppe{ position:relative; z-index:2; } .hero__grille{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; } @media (min-width:64rem){.hero__grille{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); } } .hero h1{ margin-bottom:1.3rem; } .hero__txt{ font-family:var(--serif); font-size:clamp(1.08rem,1.35vw,1.32rem); line-height:1.6; color:rgba(255,255,255,.9); max-width:56ch; margin-bottom:2rem; /* texte justifie : la cesure des mots longs evite les grands blancs entre les mots */ text-align:justify; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:8 4 3; text-wrap:pretty; } .hero__act{ display:flex; flex-wrap:wrap; gap:.75rem; } @keyframes parait{to{ opacity:1; } } /* triangle dans le hero */ .hero__triangle{ width:100%; max-width:22rem; margin-inline:auto; display:flex; flex-direction:column; align-items:center; } .hero__triangle svg{ width:100%; } .hero__triangle .contour{ stroke:rgba(255,255,255,.85); stroke-width:.9; fill:none; stroke-linejoin:round; stroke-linecap:round; } .hero__sig{ font-family:var(--serif); color:rgba(255,255,255,.95); font-size:clamp(1.35rem,2.2vw,1.75rem); text-align:center; } .hero__sous{ font-family:var(--serif); font-size:clamp(.95rem,1.3vw,1.15rem); color:var(--sable); text-align:center; } @media (prefers-reduced-motion:reduce){ .charge .hero__triangle .contour{ stroke-dashoffset:0; animation:none; } } @keyframes trace{to{ stroke-dashoffset:0; } } /* tracé de la marque dans l'en-tête,une fois au chargement */ .logo__mark .contour{ fill:none; stroke-linejoin:round; stroke-linecap:round; } @media (prefers-reduced-motion:reduce){ .charge .entete .logo__mark .contour{ stroke-dashoffset:0; animation:none; } } /* ---------- conviction (emblème simplifié) ---------- */ .bande--papier{ background:var(--papier); } .conviction__grille{ display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:center; } @media (min-width:60rem){ .conviction__grille{ grid-template-columns:minmax(0,.38fr) minmax(0,1fr); } } .conviction__gauche{ text-align:center; } .embleme{ width:100%; max-width:13rem; margin-inline:auto; } .embleme .contour{ stroke:var(--teal); stroke-width:.9; stroke-linejoin:round; stroke-linecap:round; } /* Le contour est trace par un tiret (dasharray) : son debut et sa fin tombent au sommet. Sans bouts arrondis, deux coupes droites s'y rejoignaient et dessinaient une encoche. */ @media (prefers-reduced-motion:reduce){ .avec-js .embleme .contour{ stroke-dashoffset:0; } } .conviction__titre{ font-size:clamp(1.7rem,3vw,2.6rem); color:var(--teal-texte); text-transform:none; } .conviction__droite p{ color:var(--gris); } .conviction__droite p:first-of-type{ font-family:var(--serif); font-size:1.15rem; color:var(--encre); font-weight:400; } /* image énergie : fond dégradé teal foncé + icône SVG centré */ .trio-embleme{ list-style:none; margin:0 0 1.15rem; padding:0; display:grid; gap:.6rem; } .trio-embleme li{ position:relative; padding-left:1.2rem; color:var(--gris); line-height:1.55; } .trio-embleme li::before{ content:"\25B8"; position:absolute; left:0; top:.05em; color:var(--sable); font-size:1.1em; } .trio-embleme strong{ color:var(--encre); font-weight:600; } /* ---------- chiffres clés (repères) ---------- */ .reperes{ display:grid; gap:0; border-top:1px solid var(--filet); } @media (min-width:50rem){.reperes{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .repere{ padding:1.6rem 0; border-bottom:1px solid var(--filet); text-align:center; } @media (min-width:50rem){ .repere{ padding:1.9rem clamp(1.25rem,3vw,2.5rem); } .repere + .repere{ border-left:1px solid var(--filet); } } .repere__val{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.05; color:var(--teal-texte); font-feature-settings:"lnum","tnum"; } .repere__val--texte{ font-size:clamp(1.6rem,2.6vw,2.2rem); } .repere__lib{ margin:.55rem auto 0; font-size:.95rem; color:var(--gris); max-width:26ch; } .repere__maj{ margin:.5rem auto 0; font-size:.82rem; color:var(--gris); max-width:26ch; } .repere__maj a{ color:var(--teal-texte); text-decoration:underline; } /* ---------- blocs à filet (enjeux,expertise…) ---------- */ .blocs{ display:grid; gap:1rem; } @media (min-width:50rem){.blocs--2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem clamp(1.5rem,4vw,3rem); } } @media (min-width:50rem){.blocs--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .bloc{ padding:1.05rem 1.25rem; border-left:4px solid var(--teal); background:var(--teal-tint); } .bloc--sable{ border-left-color:var(--sable-fonce); background:var(--sable-tint); } .bloc h3,.bloc h2{ color:var(--teal-texte); font-family:var(--serif); } .bloc--sable h4{ color:var(--sable-fonce); } .bloc p{ font-size:.94rem; color:var(--gris); line-height:1.55; margin:0; } /* ---------- secteurs ---------- */ .secteurs{ display:grid; gap:clamp(1.25rem,2.5vw,2rem); } @media (min-width:40rem){.secteurs{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:68rem){.secteurs{ grid-template-columns:repeat(5,minmax(0,1fr)); } } .secteur{ background:var(--blanc); border:0; display:flex; flex-direction:column; } .secteur__img{ aspect-ratio:4/3; overflow:hidden; background:var(--nuit); color:rgba(255,255,255,.85); font-size:.85rem; padding:0; } .secteur__img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.6); transition:transform .5s ease; } .secteur:hover .secteur__img img{ transform:scale(1.04); } .secteur__tete{ background:var(--teal-fonce); color:#fff; font-family:var(--sans); font-weight:600; text-transform:uppercase; text-align:center; display:flex; align-items:center; justify-content:center; } .secteur:nth-child(2) .secteur__tete{ background:var(--sable-fonce); } .secteur:nth-child(4) .secteur__tete{ background:var(--teal-profond); } .secteur ul{ list-style:none; margin:0; display:grid; } .secteur li{ position:relative; color:var(--gris); } .secteur li::before{ content:"\25B8"; position:absolute; left:0; color:var(--sable); } .secteur__accroche{ font-style:italic; font-size:.92rem; color:var(--sable-fonce); } /* ---------- retour en haut ---------- */ .haut{ position:fixed; right:clamp(1rem,3vw,2rem); /* la zone du geste systeme sur iPhone rendait le bouton inatteignable */ bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom, 0px)); width:2.75rem; height:2.75rem; z-index:60; display:flex; align-items:center; justify-content:center; background:var(--nuit); color:#fff; text-decoration:none; border:1px solid var(--sable); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, visibility .25s, background .18s ease; } .haut.visible{ opacity:1; visibility:visible; transform:none; } .haut:hover{ background:var(--teal); } .haut svg{ width:.9rem; height:.9rem; } /* ---------- révélation au défilement ---------- */ .avec-js .rev{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; } .avec-js .rev.vu{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){.avec-js .rev{ opacity:1; transform:none; transition:none; } } /* Interface (boutons,navigation,champs) : police sans-sérif */ .btn,.menu__lien,.filtre label,.champ label,.champ input,.champ select,.champ textarea,.burger,.lien-plus,.poste__dom,.carte-exp__lien,.pied,.pied h3,.repere__lib,.secteur__tete,.offre__tete,.phase__tete h3,.distinction span{ font-family:var(--sans); } /* ---------- impression ---------- */ @media print{ .entete,.haut,.hero__act,.form,.burger,.panneau{ display:none !important; } body{ background:#fff; color:#000; font-size:11pt; } .bande{ padding-block:1.2rem; break-inside:avoid; } .bande--nuit,.hero{ background:#fff !important; color:#000 !important; } .hero__fond,.hero h1,.bande--nuit h2,.bande--nuit h3,.hero__txt,.origine p,.origine__citation{ color:#000 !important; } .poste__detail{ display:block !important; } .avec-js .rev{ opacity:1 !important; transform:none !important; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; } .mega{ display:none; } } /* ================== mise en page multi-pages ================== */ .menu__lien.actif{ color:var(--teal-texte); border-bottom-color:var(--teal); } /* cartes d'accès aux pages d'expertise */ @media (min-width:44rem){.cartes-exp{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:72rem){.cartes-exp{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .carte-exp:hover .carte-exp__lien{ color:var(--teal-fonce); } @media print{.carte-exp{ break-inside:avoid; } } .grille-offres{ display:grid; gap:1.25rem; } @media (min-width:44rem){.grille-offres{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:72rem){.grille-offres{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .offre{ border:1px solid var(--filet); background:var(--blanc); display:flex; flex-direction:column; } .offre__tete{ background:var(--teal-fonce); color:#fff; font-family:var(--sans); font-weight:600; font-size:.88rem; letter-spacing:.07em; text-transform:uppercase; padding:.75rem 1rem; text-align:center; } .offre:nth-child(4n+2) .offre__tete{ background:var(--sable-fonce); } .offre:nth-child(4n+4) .offre__tete{ background:var(--teal-profond); } .offre ul{ list-style:none; margin:0; padding:1rem 1.15rem; display:grid; gap:.55rem; } .offre li{ position:relative; padding-left:1rem; font-size:.93rem; line-height:1.5; color:var(--gris); } .offre li::before{ content:"\25B8"; position:absolute; left:0; top:-.05em; color:var(--sable); font-size:1.1em; } /* ---------- phases ---------- */ .phases{ display:grid; gap:1.25rem; } @media (min-width:60rem){.phases{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .phase__tete{ color:#fff; padding:.95rem 1rem; text-align:center; } .phase__tete h3{ font-size:1.02rem; letter-spacing:.07em; text-transform:uppercase; } .phase__tete em{ display:block; font-style:italic; font-size:.86rem; opacity:.85; margin-top:.1rem; } /* Les trois bandeaux portaient trois teintes differentes,vert,dore puis vert profond. Mis cote a cote sur une meme rangee,ils faisaient lire une difference de nature entre les trois colonnes alors qu'elles sont de meme rang. La sequence est portee par les titres et par l'ordre de lecture ; la couleur n'a rien a y ajouter. */ .phase__tete{ background:var(--teal-fonce); } /* Les trois phases ont chacune leur teinte (vert, or, vert profond), comme sur la maquette d'origine : tout en vert les rendait indiscernables. La phase centrale garde ses cartes sur fond creme. */ .phase:nth-child(1) .phase__tete{ background:var(--teal-fonce); } .phase:nth-child(2) .phase__tete{ background:var(--sable-fonce); } .phase:nth-child(3) .phase__tete{ background:var(--teal-profond); } .phase:nth-child(2) .phase__item{ background:var(--sable-tint); border-color:rgba(166,124,41,.2); } .phase:nth-child(2) .phase__item h4{ color:var(--sable-fonce); } .phase__corps{ display:grid; gap:.7rem; margin-top:.7rem; } .phase__item{ border:1px solid var(--filet); background:var(--blanc); padding:.85rem 1rem; } .phase__item h4{ color:var(--teal-texte); margin-bottom:.25rem; font-size:.98rem; } .phase__item p{ font-size:.9rem; color:var(--gris); line-height:1.5; margin:0; } .transversal{ margin-top:1.5rem; background:var(--teal-fonce); color:#fff; padding:1rem 1.25rem; text-align:center; font-weight:600; font-size:1rem; } /* ---------- valeurs ---------- */ .valeurs{ display:grid; gap:1.25rem; } @media (min-width:38rem){.valeurs{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:66rem){.valeurs{ grid-template-columns:repeat(4,minmax(0,1fr)); } } /* Les quatre valeurs alternaient creme et vert pale,une carte sur deux. Elles sont de meme rang : elles prennent la meme teinte. */ .valeur{ background:var(--sable-tint); border-top:3px solid var(--sable-fonce); padding:1.5rem 1.35rem; text-align:center; } .valeur h3{ font-size:1.35rem; color:var(--sable-fonce); } .valeur .devise{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--sable-fonce); display:block; margin:.55rem 0 .9rem; padding-top:.85rem; border-top:1px solid rgba(166,124,41,.3); } /* Une valeur sur deux en teinte verte : l'alternance or / vert de la maquette d'origine. */ .valeur:nth-child(even){ background:var(--teal-tint); border-top-color:var(--teal-texte); } .valeur:nth-child(even) h3{ color:var(--teal-texte); } .valeur:nth-child(even) .devise{ color:var(--teal-texte); border-top-color:rgba(44,152,142,.3); } .valeur p{ font-size:.93rem; color:var(--gris); line-height:1.55; } /* ---------- distinctions ---------- */ /* Le cadre a 20 % de blanc eclaircissait le fond au point de faire tomber le titre sable a 2,55:1. A 8 %, le trait reste visible et le titre passe a 5,06:1 avec le sable clair ci-dessous. */ .distinctions{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); } .distinction{ background:rgba(255,255,255,.04); padding:1.15rem 1.4rem; } .distinction strong{ display:block; font-family:var(--sans); font-weight:600; color:var(--sable-clair); margin-bottom:.3rem; } .distinction span{ font-size:.94rem; color:rgba(255,255,255,.78); line-height:1.55; } /* ---------- couverture ---------- */ .couverture{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; } @media (min-width:56rem){.couverture{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } .couv-liste{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:0; } .couv-liste li{ padding:.9rem 0 .9rem 1.5rem; position:relative; border-bottom:1px solid var(--filet-clair); color:rgba(255,255,255,.86); } .couv-liste li::before{ content:"\25B8"; position:absolute; left:0; top:.95rem; color:var(--sable); font-size:.8em; } /* ---------- contact ---------- */ .contact{ display:grid; gap:clamp(2.25rem,4vw,3.5rem); } @media (min-width:60rem){.contact{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } } .carte-dir{ background:rgba(255,255,255,.07); border-left:3px solid var(--sable); padding:1.35rem 1.5rem; margin-top:1.75rem; } .carte-dir h3{ font-size:1.2rem; color:#fff; } .carte-dir .role{ font-family:var(--sans); font-weight:600; color:var(--sable-clair); font-size:.95rem; /* Le filet se pose sous le nom ; le role vient juste dessous, puis les coordonnees suivent de pres. Un padding et une marge cumules creaient auparavant pres de deux rem de vide a cet endroit. */ margin:.45rem 0 .5rem; padding-top:.55rem; padding-bottom:0; border-top:1px solid var(--filet-clair); } .carte-dir a{ color:#fff; text-decoration:none; display:block; padding:.15rem 0; font-size:.98rem; } .carte-dir a:hover{ color:var(--sable); } /* ---------- formulaire ---------- */ .form{ display:grid; gap:1.1rem; } .duo{ display:grid; gap:1.1rem; } @media (min-width:36rem){.duo{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .champ{ display:grid; gap:.38rem; } .champ label{ font-size:.88rem; color:rgba(255,255,255,.72); font-family:var(--sans); } .champ input,.champ select,.champ textarea{ font-family:var(--sans); font-size:1rem; color:#fff; background:rgba(255,255,255,.07); border:1px solid var(--filet-clair); border-radius:0; padding:.7rem .85rem; width:100%; } .champ textarea{ min-height:7.5rem; resize:vertical; } .champ input:focus,.champ select:focus,.champ textarea:focus{ border-color:var(--sable); } .champ select option{ color:#16302D; } .consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.7); } /* 13 px par defaut, sous le seuil de 24 px du critere WCAG 2.5.8. */ .consent input{ margin-top:.15rem; accent-color:var(--sable); flex:none; width:1.5rem; height:1.5rem; } .form .btn{ justify-self:start; } .retour{ color:var(--sable); margin:0; } /* ---------- filtres offres ---------- */ .filtres{ display:grid; gap:.85rem; margin-bottom:2rem; } @media (min-width:44rem){.filtres{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; } } .filtre{ display:grid; gap:.3rem; } .filtre label{ font-size:.85rem; color:var(--gris); font-family:var(--sans); } /* 1rem et pas moins : sous 16 px,Safari iOS zoome a la mise au point du champ et laisse la page agrandie,donc en defilement horizontal. */ .filtre select,.filtre input{ font-family:var(--sans); font-size:1rem; color:var(--encre); background:var(--blanc); border:1px solid var(--filet); border-radius:0; padding:.62rem .8rem; width:100%; } .filtre select:focus,.filtre input:focus{ border-color:var(--teal); } .compteur{ font-size:1.05rem; color:var(--teal-texte); margin-bottom:1.25rem; } .postes{ display:grid; gap:1rem; } @media (min-width:56rem){.postes{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .poste{ border:1px solid var(--filet); background:var(--blanc); border-left:4px solid var(--teal-texte); padding:1.4rem 1.5rem 1.6rem; } .poste--sable{ border-left-color:var(--sable-fonce); } .poste h3{ font-size:1.08rem; color:var(--encre); margin-bottom:.5rem; } .poste__dom{ display:inline-block; font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; background:var(--teal-tint); color:var(--teal-texte); padding:.2rem .55rem; margin-bottom:.55rem; } .poste--sable .poste__dom{ background:var(--sable-tint); color:var(--sable-fonce); } .poste__meta{ list-style:none; margin:0 0 1.1rem; padding:0; display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:.88rem; color:var(--gris); font-family:var(--sans); } .poste__meta li{ position:relative; padding-left:.85rem; } .poste__meta li::before{ content:"\25B8"; position:absolute; left:0; color:var(--sable); font-size:.7em; top:.35em; } .poste__detail{ border-top:1px solid var(--filet); margin-top:.4rem; padding-top:.9rem; font-size:.93rem; color:var(--gris); line-height:1.55; } .poste__detail h4{ color:var(--teal-texte); margin:1rem 0 .4rem; font-size:.95rem; } .poste__detail ul{ padding-left:1.1rem; margin:.4rem 0; } .poste__detail li{ margin-bottom:.25rem; } .poste__detail p{ margin:0 0 .6rem; } .poste__actions{ display:flex; flex-wrap:wrap; gap:.75rem 1.4rem; align-items:center; justify-content:center; margin-top:1.6rem; } .lien-plus{ background:transparent; cursor:pointer; font-family:var(--sans); font-size:.94rem; font-weight:600; padding:.72rem 1.5rem; color:var(--teal-texte); border:1px solid var(--teal-fonce); display:inline-block; text-decoration:none; transition:background .18s ease, color .18s ease; } .lien-plus:hover{ background:var(--teal-fonce); color:#fff; } .etat{ padding:1.25rem 1.35rem; border-left:4px solid var(--sable-fonce); background:var(--sable-tint); font-size:.95rem; color:var(--gris); } /* ---------- mentions légales ---------- */ .legal{ max-width:48rem; } .legal h3{ font-size:1.08rem; color:var(--teal-texte); margin:1.9rem 0 .6rem; } .legal h3:first-of-type{ margin-top:1.2rem; } .legal p,.legal li{ color:var(--gris); font-size:.95rem; } .legal p{ margin-bottom:.85rem; } .legal ul{ padding-left:1.15rem; margin:.5rem 0 .85rem; } .legal a{ color:var(--teal-texte); } /* ---------- pied ---------- */ .pied{ background:var(--nuit-plus); color:rgba(255,255,255,.7); padding-block:3rem 1.75rem; font-size:.92rem; } /* Les deux boutons fixes (Musique a gauche,retour en haut a droite) occupent la bande situee entre 16 et 76 px du bas de la fenetre. Sans marge basse suffisante,les liens du pied passaient derriere eux des que la page etait deroulee jusqu'en bas,a toutes les largeurs. */ .pied{ padding-bottom:5.25rem; } .pied__cols{ display:grid; gap:2rem; } @media (min-width:46rem){.pied__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:70rem){.pied__cols{ grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); } } .pied h3{ color:#fff; font-size:.95rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.9rem; font-family:var(--sans); } .pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; } .pied a{ color:inherit; text-decoration:none; } .pied a:hover{ color:var(--sable); } .pied__bas{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--filet-clair); display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; justify-content:space-between; font-size:.86rem; } /* ---------- entrée de page (pages intérieures) ---------- */ .entete-page{ padding-block:clamp(2.75rem,5vw,4.25rem); } .entete-page h1{ font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1; color:var(--teal-texte); font-weight:700; letter-spacing:-.012em; } /* ---------- cartes expertises (accueil) ---------- */ .cartes-exp{ display:grid; gap:1rem; } @media (min-width:44rem){.cartes-exp{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:72rem){.cartes-exp{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .carte-exp{ display:flex; flex-direction:column; background:var(--blanc); border:1px solid var(--filet); border-top:3px solid var(--teal-texte); padding:1.35rem 1.4rem; text-decoration:none; color:inherit; transition:border-color .2s ease, transform .2s ease; } .carte-exp:nth-child(even){ border-top-color:var(--sable-fonce); } .carte-exp:hover{ border-top-color:var(--sable-fonce); transform:translateY(-2px); } .carte-exp:nth-child(even):hover{ border-top-color:var(--teal-texte); } .carte-exp h3{ font-size:1.15rem; color:var(--teal-texte); margin-bottom:.5rem; min-height:2.8rem; display:flex; align-items:flex-start; } .carte-exp p{ font-size:.93rem; color:var(--gris); line-height:1.55; margin:0 0 1rem; flex:1; } .carte-exp__lien{ font-family:var(--sans); font-size:.88rem; font-weight:600; color:var(--teal-texte); border-bottom:1px solid var(--sable); align-self:flex-start; padding-bottom:.15rem; } /* ---------- dirigeants ---------- */ .dirigeants{ display:grid; gap:2.5rem; } @media (min-width:56rem){.dirigeants{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .dirigeant{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:2.25rem 1.75rem; background:var(--blanc); border:1px solid var(--filet); border-top:3px solid var(--teal-texte); } .dirigeant:nth-child(even){ border-top-color:var(--sable-fonce); } .dirigeant__photo{ width:9rem; height:9rem; border-radius:50%; overflow:hidden; border:none; margin-bottom:1.35rem; background:#F7EFE1; display:flex; align-items:center; justify-content:center; } .dirigeant__photo img{ width:100%; height:100%; object-fit:cover; } .dirigeant__nom{ font-family:var(--serif); font-weight:600; color:var(--encre); } .dirigeant p{ font-size:.97rem; color:var(--gris); line-height:1.65; max-width:38ch; margin:0 auto; } /* ================= CORRECTIFS ================= */ /* -- logo : agrandi,AUXYS centre sur "Conseil > Execution" -- la lettre-spacing ajoute un blanc APRES la derniere lettre : on le compense par une marge negative,sinon le mot parait decale a gauche. */ .logo{ display:inline-flex; align-items:center; gap:.75rem; } .logo__mark{ flex:none; } .logo__txt{ display:flex; flex-direction:column; align-items:center; } .logo__nom{ margin-right:-.205em; line-height:1; } .logo__sign{ line-height:1; } /* -- tripode : trace,pas de fondu -- dasharray == dashoffset (30 > longueur reelle) => invisible au repos ; linecap butt sinon un tiret de longueur nulle dessine un point. */ .tripode-1,.tripode-2,.tripode-3{ fill:none; stroke:var(--sable); stroke-linecap:butt; } .logo__mark .tripode-1,.logo__mark .tripode-2,.logo__mark .tripode-3{ stroke-width:.9; } .embleme .tripode-1,.embleme .tripode-2,.embleme .tripode-3{ stroke-width:.9; } .hero__triangle .tripode-1,.hero__triangle .tripode-2,.hero__triangle .tripode-3{ stroke-width:.9; } .contour{ fill:none; } /* longueurs : vertical 29,30 u — diagonaux 26,46 u. A duree egale le vertical arriverait 8% trop tard : duree reduite d'autant pour que les trois pointes atteignent le centre au meme instant. */ @keyframes trace{to{ stroke-dashoffset:0; } } .charge .entete .logo__mark .contour{ stroke-dasharray:100; stroke-dashoffset:100; animation:trace 1.1s ease-out .1s forwards; } .charge .entete .logo__mark .tripode-1,.charge .entete .logo__mark .tripode-2,.charge .entete .logo__mark .tripode-3{ stroke-dasharray:100; stroke-dashoffset:100; } .charge .entete .logo__mark .tripode-1{ animation:trace .41s ease-out 1.25s forwards; } .charge .entete .logo__mark .tripode-2,.charge .entete .logo__mark .tripode-3{ animation:trace .45s ease-out 1.25s forwards; } .charge .hero__triangle .contour{ stroke-dasharray:100; stroke-dashoffset:100; animation:trace 1.9s ease-out .3s forwards; } .charge .hero__triangle .tripode-1,.charge .hero__triangle .tripode-2,.charge .hero__triangle .tripode-3{ stroke-dasharray:100; stroke-dashoffset:100; } .charge .hero__triangle .tripode-1{ animation:trace .72s ease-out 2.25s forwards; } .charge .hero__triangle .tripode-2,.charge .hero__triangle .tripode-3{ animation:trace .8s ease-out 2.25s forwards; } /* animation continue du triangle Auxys après le tracé initial */ @keyframes tri-souffle{ 0%,100%{ opacity:.88; } 50%{ opacity:1; } } @keyframes tripode-flash{ 0%,45%{ opacity:1; } 50%,95%{ opacity:.2; } 100%{ opacity:1; } } @media (prefers-reduced-motion:no-preference){ .hero__triangle{ animation:tri-souffle 4s ease-in-out 4s infinite; } .charge .hero__triangle .tripode-1{ animation:trace .72s ease-out 2.25s forwards, tripode-flash 3.6s ease-in-out 4.2s infinite; } .charge .hero__triangle .tripode-2{ animation:trace .8s ease-out 2.25s forwards, tripode-flash 3.6s ease-in-out 5.4s infinite; } .charge .hero__triangle .tripode-3{ animation:trace .8s ease-out 2.25s forwards, tripode-flash 3.6s ease-in-out 6.6s infinite; } } /* Le trace de l'embleme part quand l'embleme LUI-MEME est a l'ecran (voir site.js), et non quand le bloc qui le contient commence a apparaitre : il se dessinait alors hors de vue, en meme temps que le texte. */ .avec-js .embleme .contour{ stroke-dasharray:100; stroke-dashoffset:100; } .avec-js .embleme.embleme--trace .contour{ animation:trace 1.5s ease-out .25s forwards; } .avec-js .embleme .tripode-1,.avec-js .embleme .tripode-2,.avec-js .embleme .tripode-3{ stroke-dasharray:100; stroke-dashoffset:100; } .avec-js .embleme.embleme--trace .tripode-1{ animation:trace .59s ease-out 1.8s forwards; } .avec-js .embleme.embleme--trace .tripode-2,.avec-js .embleme.embleme--trace .tripode-3{ animation:trace .65s ease-out 1.8s forwards; } @media (prefers-reduced-motion:reduce){ .charge .entete .logo__mark .contour,.charge .entete .logo__mark .tripode-1,.charge .entete .logo__mark .tripode-2,.charge .entete .logo__mark .tripode-3,.charge .hero__triangle .contour,.charge .hero__triangle .tripode-1,.charge .hero__triangle .tripode-2,.charge .hero__triangle .tripode-3,.avec-js .embleme .contour,.avec-js .embleme .tripode-1,.avec-js .embleme .tripode-2,.avec-js .embleme .tripode-3{ stroke-dashoffset:0; animation:none; } } /* -- puces : l'echappement \25B8 avait ete corrompu en caractere de controle -- */ .secteur li::before,.couv-liste li::before,.poste__meta li::before,.offre li::before{ content:"\25B8"; } /* -- secteurs : bandeaux de titre tous a la meme hauteur -- subgrid aligne img / titre / accroche / liste d'une carte a l'autre. */ .secteur__tete{ min-height:0; } @supports (grid-template-rows:subgrid){ @media (min-width:40rem){ .secteur{ grid-row:span 4; display:grid; grid-template-rows:subgrid; } } } @supports not (grid-template-rows:subgrid){ .secteur__tete{ min-height:3.6rem; } } /* -- phases : les 3 colonnes s'alignent ligne a ligne -- */ @supports (grid-template-rows:subgrid){ @media (min-width:60rem){ .phases{ grid-template-rows:auto repeat(4,auto); } .phase{ grid-row:span 5; display:grid; grid-template-rows:subgrid; gap:.7rem; } .phase__corps{ grid-row:span 4; display:grid; grid-template-rows:subgrid; margin-top:0; gap:.7rem; } } } @supports not (grid-template-rows:subgrid){ @media (min-width:60rem){ .phase{ display:flex; flex-direction:column; } .phase__corps{ flex:1; grid-auto-rows:1fr; } } } /* -- dirigeants -- */ .dirigeant__nom{ font-size:1.3rem; } /* ---------------- CORRECTIFS v6 ---------------- */ /* -- chapeaux : pleine largeur du conteneur (etaient brides a 78ch) -- */ .chapeau{ max-width:none; } .conviction__droite p{ max-width:none; } /* (regle #secteurs{padding-top:0} retiree : le titre « Nos secteurs » vit desormais dans la section, elle doit garder le meme espacement que les autres) */ /* -- photo du hero : bandeau industriel en fond,sous les lignes -- */ /* -- portrait : cadrage bas pour degager le col -- */ .dirigeant__photo img{ object-position:50% 46%; } /* ---------------- CORRECTIFS v7 ---------------- */ /* -- logo encore agrandi -- */ :root{ --entete:5.1rem; } .logo__mark{ width:3.3rem; height:3.3rem; } .logo__nom{ font-size:1.52rem; } .logo__sign{ font-size:.71rem; margin-top:.32rem; } .entete .logo__mark{ width:3rem; height:3rem; } .entete .logo__nom{ font-size:1.42rem; } .entete .logo__sign{ font-size:.67rem; } .pied .logo__mark{ width:3.8rem; height:3.8rem; } .pied .logo__nom{ font-size:1.68rem; } .pied .logo__sign{ font-size:.78rem; } /* -- photo du hero : nettement plus discrete (en attente d'une photo bureau) -- */ /* -- image 2 : le bloc des distinctions collait au paragraphe -- */ .origine .distinctions{ margin-top:2.6rem; } /* -- « Rejoindre Auxys » passe sur fond clair pour former un bloc avec les offres situees juste en dessous -- */ .bande--tint .distinctions{ background:var(--filet); border-color:var(--filet); } .bande--tint .distinction{ background:var(--blanc); } .bande--tint .distinction strong{ color:var(--sable-fonce); } .bande--tint .distinction span{ color:var(--gris); } .bande--tint .chapeau{ color:var(--gris); } /* ---------------- CORRECTIFS v9 ---------------- */ /* Les deux regles .btn ci-dessus etaient malformees (selecteur sans accolade) : le parseur avalait la regle suivante,ce qui neutralisait .btn--clair et .btn--sable. Le bouton « Voir nos offres » retombait donc sur le teal de .btn,d'ou le manque de contraste. */ /* bouton sable : contraste verifie sur fond clair comme sur fond nuit */ .btn--sable{ background:var(--sable); border-color:var(--sable); color:var(--nuit-plus); font-weight:700; } .btn--sable:hover{ background:#DCC08C; border-color:#DCC08C; color:var(--nuit-plus); } .bande--tint .btn--sable{ background:var(--sable-fonce); border-color:var(--sable-fonce); color:#fff; } .bande--tint .btn--sable:hover{ background:#7A5A1A; border-color:#7A5A1A; color:#fff; } /* ---------------- CORRECTIFS v10 ---------------- */ /* -- hero : plus de photo d'usine. Le fond redevient le vert profond + les lignes geometriques,neutre pour l'industrie comme pour la banque ou l'assurance. La regle ::after est neutralisee,pas supprimee : il suffira d'y remettre une image quand la photo bureau arrivera. -- */ /* -- image 1 : bandeaux de secteur plus lisibles -- */ .secteur__tete{ font-size:1.02rem; letter-spacing:.05em; line-height:1.3; padding:.95rem 1rem; } /* -- image 2 : listes de secteurs,respiration et coupures propres -- */ .secteur ul{ padding:1.1rem 1.25rem 1.35rem; gap:.75rem; } .secteur li{ font-size:.95rem; line-height:1.55; padding-left:1.15rem; text-wrap:pretty; } .secteur li::before{ top:0; line-height:1.55; } /* -- image 3 : barre de comptage des offres -- */ .compteur{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.45rem 1.25rem; margin:0 0 1.75rem; padding-bottom:.9rem; border-bottom:1px solid var(--filet); } .compteur__nb{ font-family:var(--serif); font-weight:600; color:var(--teal-texte); font-size:clamp(1.18rem,1.9vw,1.5rem); line-height:1.2; } .compteur__maj{ font-family:var(--sans); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); justify-self:end; white-space:nowrap; } .compteur__aide{ grid-column:1/-1; margin:0; font-family:var(--sans); font-size:.93rem; color:var(--gris); line-height:1.5; } @media (max-width:38rem){ .compteur{ grid-template-columns:1fr; } .compteur__maj{ justify-self:start; } } /* ---------------- CORRECTIFS v11 ---------------- */ /* Hero : quartier d'affaires de nuit (chantier + tours de bureaux). Transversal : ne renvoie ni a la siderurgie ni a un secteur precis. Remplacer l'URL ci-dessous par la photo bureau quand elle arrivera. */ /* ---------------- CORRECTIFS v12 ---------------- */ /* -- hero : salle de reunion en mode projet -- */ .hero__fond::after{ content:""; position:absolute; inset:0; } .hero__geo{ z-index:1; } /* -- image 2 : ces liens de contact heritaient du soulignement par defaut (aucune regle ne les couvrait hors du pied de page) -- */ .bande--nuit p a[href^="mailto:"],.bande--nuit p a[href^="tel:"],.bande--nuit p a[href*="maps.google"]{ text-decoration:none; } .bande--nuit p a[href^="mailto:"]:hover,.bande--nuit p a[href^="tel:"]:hover,.bande--nuit p a[href*="maps.google"]:hover{ color:var(--sable); } /* -- image 3 : menus deroulants -- */ .champ select,.filtre select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-repeat:no-repeat; background-position:right 1rem center; background-size:.72rem auto; padding-right:2.6rem; cursor:pointer; transition:border-color .18s ease, background-color .18s ease; } .champ select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C9A96E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-color:rgba(255,255,255,.09); } .champ select:hover{ background-color:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); } .champ select:focus{ border-color:var(--sable); outline:none; box-shadow:0 0 0 2px rgba(201,169,110,.25); } .filtre select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231C6A62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-color:var(--blanc); } .filtre select:hover{ border-color:var(--teal); } .filtre select:focus{ border-color:var(--teal); outline:none; box-shadow:0 0 0 2px rgba(44,152,142,.2); } .champ select option,.filtre select option{ color:#16302D; background:#fff; padding:.4rem; } .champ select::-ms-expand,.filtre select::-ms-expand{ display:none; } /* ---------------- CORRECTIFS v13 ---------------- */ /* -- hero : photo plus effacee et teintee vert. Le degrade vert est empile AU-DESSUS de l image dans la meme propriete background : il la teinte sans calque supplementaire. -- */ /* -- logos en-tete et hero : meme vitesse. Longueurs identiques (29,30 u pour le vertical,26,46 pour les diagonaux) donc le vertical garde sa duree reduite de 9,7 % pour que les trois pointes se rejoignent au centre ensemble. -- */ .charge .entete .logo__mark .contour,.charge .hero__triangle .contour{ stroke-dasharray:100; stroke-dashoffset:100; animation:trace 1.3s ease-out .15s forwards; } .charge .entete .logo__mark .tripode-1,.charge .hero__triangle .tripode-1{ animation:trace .47s ease-out 1.5s forwards; } .charge .entete .logo__mark .tripode-2,.charge .entete .logo__mark .tripode-3,.charge .hero__triangle .tripode-2,.charge .hero__triangle .tripode-3{ animation:trace .52s ease-out 1.5s forwards; } /* ---------------- CORRECTIFS v14 ---------------- */ /* Les roles portaient le filet de separation sous le nom : on le reporte sur le nom,qui devient le dernier element avant la bio. */ .dirigeant__nom{ border-bottom:1px solid var(--filet); width:100%; } /* ---------------- CORRECTIFS v15 ---------------- */ /* Logo : Georgia,comme le fichier de reference. Le fichier officiel ne declare aucun font-weight (donc 400) et utilise 0.205em pour AUXYS,0.25em pour la signature. On reprend ces valeurs telles quelles pour que le lettrage du site et le logo source coincident. */ :root{ --logo: Georgia, "Times New Roman", Times, serif; } .logo__nom,.logo__sign,.hero__sig,.hero__sous{ font-family:var(--logo); } .logo__nom{ font-weight:400; letter-spacing:.205em; } .logo__sign{ font-weight:400; letter-spacing:.25em; margin-right:-.25em; } .hero__sig{ font-weight:400; letter-spacing:.205em; } .hero__sous{ font-weight:400; letter-spacing:.25em; } /* ---------------- CORRECTIFS v16 ---------------- */ /* -- photo du hero encore plus teintee -- */ .hero__fond::after{ background: linear-gradient(rgba(22,55,49,.80), rgba(22,55,49,.80)), url("images/bureau-1600.webp?v=20260922") center/cover no-repeat; opacity:.13; filter:grayscale(.9) contrast(1.02); } /* -- image 1 : lettrage resserre sous le triangle -- */ .hero__sig{ margin-top:.15rem; } .hero__sous{ margin-top:.15rem; } /* -- image 2 : accroche rapprochee du bandeau de titre -- */ .secteur__accroche{ margin:.55rem 1.25rem 0; } .secteur ul{ padding-top:.7rem; } /* ---------------- CORRECTIFS v19 ---------------- */ /* -- hero : .hero__sig n'etant pas le dernier enfant,il gardait le margin-bottom:1rem par defaut des

. C'etait la cause de l'ecart. -- */ .hero__triangle{ gap:.35rem; } .hero__sig{ margin:0; } .hero__sous{ margin:.1rem 0 0; } /* -- liens de la liste « Nos autres expertises » : aucune regle ne les couvrait,ils tombaient sur le bleu souligne du navigateur -- */ .couv-liste a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:.1rem; } .couv-liste a:hover{ color:var(--sable); border-bottom-color:var(--sable); } /* -- volets d'expertise ouverts au clic sur une carte -- */ .carte-exp{ cursor:pointer; } .carte-exp.actif{ border-color:var(--teal); background:var(--teal-tint); box-shadow:0 0 0 2px rgba(44,152,142,.18); } .carte-exp.actif .carte-exp__lien{ color:var(--teal-fonce); } /* est en ligne : sans inline-block, sa largeur et sa hauteur sont ignorees et seule la bordure droite se voyait, comme un trait vertical apres « Voir le detail ». */ .carte-exp__lien .menu__fleche{ display:inline-block; margin-left:.35rem; vertical-align:.12em; } .carte-exp[aria-expanded="true"] .menu__fleche{ transform:rotate(-135deg) translate(-3px,-3px); } .carte-exp-zone{ margin-top:1.25rem; } /* Le volet porte la couleur de la carte ouverte : vert pour les cartes impaires, or pour les paires, comme leur filet du haut. */ .carte-exp__detail{ background:var(--blanc); border:1px solid var(--filet); border-top:3px solid var(--teal-texte); padding:1.6rem 1.75rem 1.7rem; gap:1.4rem 2rem; box-shadow:0 14px 30px -22px rgba(30,58,53,.45); } .carte-exp-zone .carte-exp__detail:nth-child(even){ border-top-color:var(--sable-fonce); } /* :not([hidden]) plutôt qu'un display pose sur la regle de base : sinon cette regle d'auteur l'emporterait sur le [hidden] de l'agent utilisateur (meme specificite, mais une regle d'auteur passe toujours devant), et le volet resterait visible alors meme que l'attribut hidden est present. */ .carte-exp__detail:not([hidden]){ display:grid; animation:volet-ouvre .28s ease-out; } @keyframes volet-ouvre{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } } @media (min-width:52rem){.carte-exp__detail:not([hidden]){ grid-template-columns:minmax(0,1fr) auto; align-items:end; } } .carte-exp__titre{ font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--teal-texte); margin:0 0 1rem; padding-bottom:.7rem; border-bottom:1px solid var(--filet); } .carte-exp-zone .carte-exp__detail:nth-child(even) .carte-exp__titre{ color:var(--sable-fonce); } .carte-exp__liste{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; } @media (min-width:36rem){.carte-exp__liste{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:68rem){.carte-exp__liste{ grid-template-columns:repeat(3,minmax(0,1fr)); } } .carte-exp__liste li{ position:relative; padding:.6rem .85rem .6rem 1.85rem; font-size:.93rem; color:var(--encre); line-height:1.4; background:var(--papier); border:1px solid var(--filet); } .carte-exp__liste li::before{ content:"\25B8"; position:absolute; left:.8rem; top:.6rem; color:var(--sable-fonce); font-size:1.05em; line-height:1.4; } .carte-exp__complet{ font-family:var(--sans); font-size:.9rem; font-weight:600; color:#fff; background:var(--teal-texte); padding:.8rem 1.35rem; text-decoration:none; justify-self:start; white-space:nowrap; transition:background-color .2s ease; } .carte-exp__complet:hover,.carte-exp__complet:focus-visible{ background:var(--teal-fonce); } .carte-exp-zone .carte-exp__detail:nth-child(even) .carte-exp__complet{ background:var(--sable-fonce); } .carte-exp-zone .carte-exp__detail:nth-child(even) .carte-exp__complet:hover{ background:#6F5118; } @media (prefers-reduced-motion:reduce){ .carte-exp__detail:not([hidden]){ animation:none; } } @media (prefers-reduced-motion:reduce){.carte-exp[aria-expanded] .menu__fleche{ transition:none; } } /* ---------------- CORRECTIFS v22 : petits ecrans ---------------- */ /* La date en capitales espacees depasse 350px : le nowrap la faisait deborder sous 360px. Sur petit ecran elle passe sur sa propre ligne et peut se couper normalement. */ @media (max-width:38rem){ .compteur__maj{ white-space:normal; } } /* Logo legerement reduit sur les tres petits ecrans : a 3rem de pictogramme plus la signature, l'en-tete devenait juste a 320px. */ @media (max-width:30rem){ :root{ --entete:4.4rem; } .entete .logo__mark{ width:2.4rem; height:2.4rem; } .entete .logo__nom{ font-size:1.15rem; } .entete .logo__sign{ font-size:.56rem; letter-spacing:.18em; margin-right:-.18em; } } /* Filet de securite : adresses e-mail et mots longs ne poussent plus la page en largeur. */ body{ overflow-wrap:break-word; } /* ---------------- Retour du formulaire (IONOS) ---------------- */ .retour{ margin-top:.9rem; font-family:var(--sans); font-size:.95rem; min-height:1.2em; } .retour--ok{ color:var(--sable); } .retour--alerte{ color:#F0B8A8; } /* ---------------- CORRECTIFS v23 ---------------- */ /* -- image 1 : la section du titre gardait sa marge basse pleine,qui s'ajoutait a la grille d'images juste dessous -- */ /* Le zero cumulait avec #secteurs{padding-top:0}et la marge nulle du chapeau : le dernier mot du texte touchait le bord de la photo. */ /* (padding-bottom reduit avant #secteurs retire : meme espacement que partout) */ /* -- image 2 : filet a egale distance du nom et du texte -- */ /* La regle ".dirigeant p{margin:0 auto}" est plus specifique et annulait la marge basse : on remonte la specificite pour la retablir. */ .dirigeant p.dirigeant__nom{ padding-bottom:1.15rem; margin-bottom:1.15rem; } /* -- image 4 : le filet superieur de la liste creait une ligne blanche flottante au-dessus du premier element -- */ .couv-liste{ border-top:0; margin-top:1.1rem; } /* ---------------- CORRECTIFS v25 ---------------- */ /* Titre des cartes .bloc : 0,3rem ne detachait pas assez le titre du paragraphe. Portee limitee a ces cartes. */ /* ---------------- CORRECTIFS v26 ---------------- */ /* Bandeaux des cartes « Nos domaines d'intervention » a hauteur egale. .offre est un flex vertical : chaque bandeau prenait la hauteur de son propre texte, donc un titre sur deux lignes decalait toute la carte. subgrid fait partager au bandeau et a la liste les memes rangees que la grille parente, ligne de cartes par ligne de cartes. */ @supports (grid-template-rows:subgrid){ @media (min-width:44rem){ .offre{ grid-row:span 2; display:grid; grid-template-rows:subgrid; } } } /* Repli pour les navigateurs sans subgrid : hauteur minimale sur deux lignes. */ @supports not (grid-template-rows:subgrid){ @media (min-width:44rem){.offre__tete{ min-height:3.9rem; } } } /* Titre centre verticalement quand il tient sur une seule ligne. */ .offre__tete{ display:flex; align-items:center; justify-content:center; } /* ---------------- CORRECTIFS v27 ---------------- */ /* 1. LIGNE GRISE ENTRE DEUX SECTIONS Le fond du body est #FBFCFB alors que les sections sont en #FFFFFF. Le chapeau porte une marge basse en style inline ; des lors que la section a un padding-bottom de 0,cette marge s'echappe de la section (fusion des marges) et laisse apparaitre le fond de page : d'ou la bande grise et son arete nette. flow-root confine la marge a l'interieur de la section. L'ecart reste identique,il devient blanc. */ .bande:has(+ #secteurs){ display:flow-root; } /* 2. DESCRIPTIONS DES PAGES METIER .entete-page .chapeau etait bride a 70ch. Sa specificite (0,2,0) l'emportait sur la regle generale .chapeau{max-width:none}quel que soit l'ordre dans la feuille : ces descriptions etaient les seules du site a ne pas occuper toute la largeur. Concerne les 9 pages qui utilisent un en-tete de page. */ .entete-page .chapeau{ max-width:none; } /* 3. FILET DORE : MEME ESPACEMENT PARTOUT Les 17 titres du site sont tous suivis d'un filet. Le filet general a 1rem au-dessus et 2rem en dessous ; celui des en-tetes de page n'avait que 1,5rem en dessous. On aligne sur la valeur generale. Aucune autre marge n'est touchee. */ .entete-page .filet-titre{ margin:1rem 0 2rem; } /* 4. TITRE DES CARTES .bloc Le plus long titre fait 46 caracteres (« Renforcer les equipes sur les phases critiques »). A 1,1rem il passait sur deux lignes dans une colonne sur trois. On revient donc a 1,02rem et on cherche le contraste dans la graisse : 700 au lieu de 600,Spectral etant charge dans cette graisse. Combine a la couleur doree et aux 0,9rem de degagement,le titre se detache sans s'elargir. */ .bloc h3,.bloc h2{ font-size:1.02rem; font-weight:700; margin-bottom:1.2rem; text-transform:none; letter-spacing:normal; } /* ---------------- CORRECTIFS v28 : hierarchie des titres ---------------- Les titres du pied,des cartes et des pages legales sautaient un niveau (h2 -> h4,h1 -> h3),ce qui rompt la structure pour les lecteurs d'ecran. Les niveaux sont corriges ; les regles ci-dessous conservent exactement l'apparence d'origine. */ .legal__titre{ font-size:clamp(1.12rem,1.35vw,1.28rem); font-weight:600; text-transform:none; letter-spacing:normal; color:var(--teal-texte); } /* Le message de retour recoit le focus : on masque le contour par defaut au profit d un liseré coherent avec le reste du site. */ .retour:focus{ outline:2px solid var(--sable); outline-offset:3px; } /* ---------------- CORRECTIFS v29 ---------------- Cartes « Nos valeurs » : la devise passe sur deux lignes dans certaines cartes, ce qui decalait le paragraphe vers le bas. Les trois rangees (titre, devise, texte) sont partagees avec la grille parente pour s'aligner d'une carte a l'autre. row-gap:0 annule l'ecart de la grille parente a l'interieur de la carte : l'espacement reste celui des marges de .devise, inchange. */ @supports (grid-template-rows:subgrid){ @media (min-width:38rem){ .valeur{ display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:0; } } } /* Repli sans subgrid : hauteur minimale sur deux lignes de devise. */ @supports not (grid-template-rows:subgrid){ @media (min-width:38rem){.valeur .devise{ min-height:3.4rem; } } } /* ---------------- CORRECTIFS v30 : impression ---------------- Trois elements restaient sombres ou inutiles sur le papier : le pied de page en vert nuit plein format, la photo de fond du hero, et les grandes images de secteurs. */ @media print{ /* Le pied garde ses coordonnees,utiles sur papier,mais sur fond blanc. */ .pied{ background:#fff !important; color:#000 !important; border-top:1px solid #999; } .pied a,.pied h3,.pied p,.pied span,.pied li{ color:#000 !important; } .pied .logo__nom{ color:#000 !important; } .pied .logo__sign{ color:#555 !important; } .pied .contour{ stroke:#000 !important; } .pied .tripode-1,.pied .tripode-2,.pied .tripode-3{ stroke:#555 !important; } /* Photo de fond du hero et lignes geometriques : sans objet sur papier. */ .hero__fond::after{ content:none !important; } .hero__geo{ display:none !important; } /* Les grandes photos de secteurs consomment beaucoup d'encre pour une valeur informative faible. */ .secteur__img{ display:none !important; } /* Les images conservees ne debordent pas de la page. */ img{ max-width:100% !important; } } /* Texte reserve aux lecteurs d'ecran : retire du flux visuel sans etre masque pour les technologies d'assistance. */ .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; } /* ---------------- CORRECTIFS v31 : espacements ---------------- */ /* 1. Le filet sous le nom des dirigeants etait colle au texte du dessous (18,4 px au-dessus,0 en dessous). Il est desormais a egale distance du nom et du paragraphe. */ .dirigeant__nom{ padding-bottom:1.15rem; margin-bottom:1.15rem; } /* 2. La bande "Notre couverture" est une grille a deux colonnes dont les elements etaient centres verticalement : son titre descendait de 49 px par rapport a tous les autres titres de bloc (133 px au lieu de 84 px). On aligne les colonnes en haut. */ .enveloppe.couverture{ align-items:start; } /* 3. Quand deux bandes de meme fond se suivaient,aucune separation ne marquait la fin du bloc precedent : le titre suivant semblait flotter tres loin (735 px pour "Notre accompagnement",567 px pour "Postes ouverts"). Un filet retablit une rupture nette,donc un espacement percu identique partout. La paire "Nos secteurs" + ses cartes est volontairement soudee : elle en est exclue. */ .bande--blanc + .bande--blanc:not(#secteurs),.bande--tint + .bande--tint,.bande--papier + .bande--papier{ border-top:1px solid var(--filet); } .bande--nuit + .bande--nuit{ border-top:1px solid var(--filet-clair); } /* ---------------- CORRECTIFS v32 : respiration des textes ---------------- */ /* 1. Les textes de presentation portaient quatre espacements differents selon les pages (2,25rem,2rem,1,75rem ou rien). Les valeurs posees en ligne dans le HTML sont retirees,l'espacement devient unique. Sous un titre de page,le chapeau ferme la bande : pas de marge basse. */ /* "p:last-child{margin-bottom:0}" est plus specifique et annulait la marge sur les 18 chapeaux qui terminent leur conteneur : on egalise la specificite pour que la regle s'applique partout. */ p.chapeau{ margin-bottom:2.25rem; } .entete-page .chapeau{ margin-bottom:0; } /* 2. Diagrammes en colonnes : le grand titre d'un groupe et son sous-titre etaient colles,comme le titre de chaque carte et son texte. */ .phase__tete h3{ margin-bottom:.45rem; } .phase__tete em{ margin-top:0; } .phase__item h4{ margin-bottom:.55rem; } /* 3. Cartes secteurs : l'accroche en or flottait seule,a 41 px du bandeau et 32 px de la liste,parce que la carte heritait du grand ecart de la grille. On lui donne son propre interligne. */ .secteur{ row-gap:1.4rem; } .secteur__accroche{ margin-top:0; margin-bottom:0; } /* ---------------- CORRECTIFS v33 ---------------- */ /* Carte de contact : deux dirigeants au lieu d'un,cote a cote sur grand ecran,empiles sur mobile. Le filet dore passe sur chaque fiche. */ .carte-dir{ background:none; border-left:0; padding:0; margin-top:1.75rem; display:grid; gap:1rem; } /* Les deux fiches restent empilees : la colonne de gauche est etroite,et deux colonnes y couperaient les adresses e-mail en plein milieu. */ .carte-dir__pers{ background:rgba(255,255,255,.07); border-left:3px solid var(--sable); padding:1.35rem 1.4rem; } .carte-dir__pers h3{ font-size:1.12rem; color:#fff; } /* Coordonnees protegees : sans JavaScript le repli reste lisible. En ligne par defaut : ces liens apparaissent surtout au fil d'une phrase (mentions legales,politique de confidentialite,pied de page), ou un affichage en bloc renvoyait la ponctuation suivante seule a la ligne. Seules les cartes des dirigeants veulent une ligne par coordonnee,et le demandent explicitement. */ .protege{ color:#fff; text-decoration:none; display:inline; padding:0; font-size:.96rem; word-break:break-word; } .protege:hover{ color:var(--sable); } .carte-dir__pers .protege{ display:block; padding:.15rem 0; } /* ---------------- CORRECTIFS v34 ---------------- */ /* 1. Les bandeaux des cartes « domaines d'intervention » alternaient en 4n+2 (dore) et 4n+4 (vert profond). Sur une grille a trois colonnes cela donnait vert / dore / vert puis vert profond / vert / dore : aucune logique lisible,la couleur ne disait rien. Ces six cartes sont des pairs,sans ordre ni hierarchie : elles prennent donc toutes la meme couleur. Le dore continue de ponctuer les puces et les filets. */ .offre:nth-child(4n+2) .offre__tete,.offre:nth-child(4n+4) .offre__tete{ background:var(--teal-fonce); } .secteur:nth-child(2) .secteur__tete,.secteur:nth-child(4) .secteur__tete{ background:var(--teal-fonce); } /* 2. La carte est une sous-grille : l'ecart de 20 px de la grille s'ajoutait au retrait interne de la liste,ce qui eloignait la premiere ligne du bandeau de 36 px. */ .offre{ row-gap:0; } .offre ul{ padding-top:.85rem; } /* ---------- ambiance sonore ---------- Coupee par defaut : le visiteur l'allume. Le controle se place a gauche pour laisser le coin droit au retour en haut de page. */ .ambiance{ position:fixed; left:clamp(1rem,3vw,2rem); bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom, 0px)); z-index:60; } .ambiance__bouton{ display:flex; align-items:center; gap:.6rem; height:2.75rem; padding:0 1rem; background:var(--nuit); color:#fff; border:1px solid var(--sable); cursor:pointer; font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:background .18s ease; } .ambiance__bouton:hover{ background:var(--teal); } .ambiance__bouton:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; box-shadow:0 0 0 5px var(--nuit); } /* 4 barres equalizer — dissociées */ .ambiance__ondes{ display:flex; align-items:flex-end; gap:3px; height:16px; } .ambiance__ondes i{ display:block; width:3px; height:40%; background:var(--sable); border-radius:1px; } .ambiance__bouton[aria-pressed="true"] .ambiance__ondes i:nth-child(1){ animation:onde 1.1s ease-in-out infinite; } .ambiance__bouton[aria-pressed="true"] .ambiance__ondes i:nth-child(2){ animation:onde 1.1s ease-in-out .28s infinite; } .ambiance__bouton[aria-pressed="true"] .ambiance__ondes i:nth-child(3){ animation:onde 1.1s ease-in-out .56s infinite; } .ambiance__bouton[aria-pressed="true"] .ambiance__ondes i:nth-child(4){ animation:onde 1.1s ease-in-out .84s infinite; } @keyframes onde{ 0%,100%{ height:25%; } 50%{ height:100%; } } @media (prefers-reduced-motion:reduce){ .ambiance__ondes i{ animation:none !important; } } @media (max-width:640px){ .ambiance__texte{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .ambiance__bouton{ width:2.75rem; padding:0; justify-content:center; } } /* ---------------- VERSION BILINGUE ---------------- */ /* Selecteur de langue. Deux liens,pas un bouton : chaque version a sa propre adresse,le visiteur peut donc l'ouvrir dans un nouvel onglet et la partager. La langue courante reste affichee mais inactive,pour que le visiteur sache toujours ou il se trouve. */ .langue{ display:flex; align-items:center; gap:.35rem; font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.08em; margin-left:auto; } .langue__lien{ color:var(--gris); text-decoration:none; padding:.3rem .45rem; border-radius:2px; transition:color .2s ease, background-color .2s ease; } .langue__lien:hover,.langue__lien:focus-visible{ color:var(--teal-texte); background:var(--teal-tint); } .langue__lien--actif{ color:var(--encre); cursor:default; } .langue__lien--actif:hover{ background:none; color:var(--encre); } .langue__sep{ width:1px; height:.85em; background:var(--filet); } /* En-tete : le selecteur se place juste avant le bouton de contact. La marge automatique du bloc menu assure deja l'espacement,celle du selecteur le collerait au bord. */ .entete__int > .langue{ margin-left:0; } /* Panneau mobile : le selecteur ouvre la liste,aligne sur les liens. */ .langue--panneau{ justify-content:flex-start; padding:.7rem var(--marge); border-bottom:1px solid var(--filet); background:var(--teal-tint); } @media (max-width:67.99rem){ /* Le menu horizontal disparait au profit du burger : le selecteur de l'en-tete disparait avec lui,celui du panneau prend le relais. */ .entete__int > .langue{ display:none; } } @media print{ .langue{ display:none !important; } } /* ---------------- CORRECTIFS DU 8 OCTOBRE 2026 ---------------- */ /* 1. Lien de la case de consentement. Le formulaire vit sur le bandeau sombre,et le lien vers la politique de confidentialite n'etait vise par aucune regle : il retombait sur le bleu par defaut du navigateur,soit un rapport de contraste de 1,23 sur ce fond. Le sable passe largement le seuil AA. */ .consent a{ color:var(--sable); text-underline-offset:.18em; text-decoration-thickness:.06em; } .consent a:hover,.consent a:focus-visible{ color:#E3C994; } /* 2. Mouvement reduit : l'embleme continuait de se tracer. Les autres animations etaient deja neutralisees, celle du logo et du triangle du bandeau avaient ete oubliees. */ @media (prefers-reduced-motion:reduce){ /* Les branches portent les classes tripode-1 a tripode-3,pas « tripode » : une regle sur .tripode seul ne les atteignait pas. */ .logo__mark .contour,.logo__mark [class^="tripode"],.hero__triangle .contour,.hero__triangle [class^="tripode"],.embleme .contour,.embleme [class^="tripode"]{ animation:none !important; stroke-dasharray:none !important; stroke-dashoffset:0 !important; opacity:1 !important; } } /* 3. Impression : les blocs reveles au defilement remontaient bien a l'opacite 1, mais au terme d'une transition de six dixiemes de seconde. Sur une page imprimee sans avoir ete parcourue, la bascule doit etre immediate. */ @media print{ .avec-js .rev{ transition:none !important; } } /* 4. Les pages d'expertise portent deux paragraphes d'introduction : le second se collait au premier,faute de marge entre deux chapeaux consecutifs. */ .entete-page .chapeau + .chapeau{ margin-top:1.05rem; } /* Mention d'information au point de collecte (RGPD article 13). */ .form__mention{ margin:.85rem 0 0; font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.7); } .form__mention a{ color:var(--sable); text-underline-offset:.18em; text-decoration-thickness:.06em; } .form__mention a:hover,.form__mention a:focus-visible{ color:#E3C994; } /* .protege est en bloc sur les cartes de contact,ou l'adresse tient sa propre ligne. Dans cette phrase,elle doit rester dans le fil du texte,sinon la ponctuation qui la suit se retrouve seule a la ligne. */ .form__mention .protege{ display:inline; padding:0; font-size:inherit; font-family:inherit; letter-spacing:inherit; color:var(--sable); text-decoration:underline; } .form__mention .protege:hover,.form__mention .protege:focus-visible{ color:#E3C994; } /* ------------------------------------------------------------------ Tableaux venus du flux HelloWork Les recruteurs en saisissent dans le descriptif. Sans cadre,un tableau a cinq colonnes impose sa largeur et pousse la page horizontalement sur telephone. ------------------------------------------------------------------ */ .poste__detail table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse; font-size:.9rem; } .poste__detail td,.poste__detail th{ padding:.35rem .5rem; border:1px solid var(--filet); } /* Le selecteur de langue du panneau mobile est le seul acces au changement de langue sur telephone : il lui faut une cible d'au moins 44 px. */ .langue--panneau .langue__lien{ padding:.75rem .85rem; } @media (max-width:67rem){.burger{ padding:.6rem .75rem; } } /* ---------------- CORRECTIFS DU 9 OCTOBRE 2026 : IMPRESSION ---------------- La feuille d'impression blanchissait le fond des sections sombres et noircissait leur texte, mais seulement sur les conteneurs. Les elements qui portent eux-memes une couleur blanche la gardaient : sur papier, les deux adresses et les deux numeros de la page Contact, les bandeaux des trois phases, les boutons et le bandeau transversal sortaient en blanc sur blanc. Le bouton Musique, lui, s'imprimait. */ @media print{ /* Un controle d'interface n'a rien a faire sur une feuille. */ .ambiance{ display:none !important; } /* Tout ce qui portait du blanc sur fond sombre repasse en noir. */ .bande--nuit a,.bande--nuit p,.bande--nuit li,.bande--nuit span, .bande--nuit strong,.bande--nuit em,.bande--nuit h4, .carte-dir__pers h3,.carte-dir__pers .role,.protege, .distinction strong,.distinction span, .hero__txt,.hero p,.hero .logo__nom,.hero .logo__sign{ color:#000 !important; } /* Les cadres translucides deviennent un filet simple : sans fond imprime, leur bordure a 8 % de blanc disparaissait. */ .carte-dir__pers,.distinctions,.distinction{ background:transparent !important; border-color:#999 !important; } .carte-dir__pers{ border-left:3px solid #555 !important; } /* Bandeaux de phase et bandeau transversal : le fond vert n'est pas imprime par defaut, le texte blanc devenait invisible. */ .phase__tete,.transversal,.offre__tete,.secteur__tete{ background:transparent !important; color:#000 !important; border-bottom:1px solid #999; } .phase__tete h3,.phase__tete em,.secteur__tete,.offre__tete{ color:#000 !important; } /* Les boutons deviennent du texte : leur fond ne s'imprime pas. */ .btn,.btn--sable{ background:transparent !important; color:#000 !important; border:1px solid #555 !important; } /* Le lien d evitement reste hors du flux imprime. */ .saut{ display:none !important; } } /* Sans JavaScript, les trois filtres de la page des offres restent affiches mais ne commandent plus rien : le visiteur choisit un domaine et une region, tape des mots-cles, et rien ne bouge. Le bloc