/* Accelerateur Business IA — par ContinuIT Delivery
   Palette : azur (froid, technique) sur papier presque blanc. Troisieme maison du groupe,
   a cote du site CID (navy/orange) et de L'Atelier IT (vert). Meme grammaire que les deux
   autres sites (jetons --rang/--titre/--texte, classes .bloc/.rang), couleur seule change. */

:root{
  --papier:#FBFDFE;
  --azur-voile:#E8F4FA;
  --azur:#0E96C8;
  --azur-fonce:#0A6F96;
  --encre:#0C2E45;
  --encre-doux:#55697A;
  --trait:#DCE7EE;
  --blanc:#fff;

  /* Empruntees aux deux autres maisons, uniquement pour le bandeau et les passerelles.
     Deux valeurs par maison : la teinte de marque telle quelle (filets, aplats, anneaux de
     l'embleme -- seuil 3:1 des indicateurs non textuels) et la MEME teinte descendue pour
     passer le seuil texte 4,5:1 sur papier, seule a pouvoir porter le nom de la maison. */
  --cid-nuit:#0B1B33;
  --cid-bleu:#1F4E8C;
  --cid-orange:#F59E5C;  --cid-fonce:#9A4E1E;
  --atelier-vert:#2E9E6B; --atelier-fonce:#1E7A51;

  --ombre-douce:0 2px 4px rgba(12,46,69,.04), 0 8px 24px rgba(12,46,69,.06);
  --ombre-levee:0 6px 12px rgba(12,46,69,.07), 0 18px 40px rgba(12,46,69,.10);

  --rang:1120px;
  --titre:'Bricolage Grotesque', system-ui, sans-serif;
  --texte:'Inter', system-ui, sans-serif;
}

/* Contrastes mesures (remplacent le tableau du brief, qui etait faux sur deux lignes) :
   --encre sur --papier            13.79:1  texte courant
   --encre-doux sur --papier        5.58:1  texte secondaire
   --azur-fonce sur --papier        5.52:1  texte colore, liens
   --encre sur --azur-voile        12.57:1  texte sur bloc teinte
   --azur sur --papier              3.31:1  aplats/bordures/pictogrammes SEULEMENT, jamais de texte
   blanc sur --azur                 3.38:1  INTERDIT (echoue AA)
   --azur sur --azur-fonce          1.67:1  INTERDIT (echoue le seuil 3:1 des indicateurs non
                                             textuels -- ex. anneau de focus sur fond sombre)
   blanc sur --azur-fonce           5.63:1  fond des boutons pleins ; fond de #parler (ronde 1) :
                                             texte principal, bouton secondaire (filet+texte),
                                             anneau de focus (ronde 2, ex --azur, cf ligne ci-dessus)
   --azur-fonce sur blanc           5.64:1  titres de carte ; bouton plein invertit sur #parler
   --azur-fonce sur --azur-voile    5.03:1  texte colore sur bloc teinte (section #mesure)
   --azur-voile sur --azur-fonce    5.03:1  mention de #parler (ronde 2) -- meme paire que la
                                             ligne du dessus, sens invertit (ratio symetrique) */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:92px}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azur-fonce)}
:focus-visible{outline:3px solid var(--azur);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--titre);line-height:1.08;margin:0 0 .35em;letter-spacing:-.022em}
h1{font-size:clamp(2.4rem,6vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.012em}
p{margin:0 0 1em;max-width:68ch}

.rang{width:100%;max-width:var(--rang);margin:0 auto;padding:0 28px}
.bloc{padding:clamp(56px,8vw,104px) 0}
.bloc-voile{background:var(--azur-voile);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}

.surtitre{font-family:var(--titre);font-weight:600;font-size:.95rem;color:var(--azur-fonce);
  margin:0 0 .5em;display:flex;align-items:center;gap:10px}
.surtitre::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--azur)}

/* ===== BOUTONS =====
   Le fond plein est --azur-fonce (blanc/azur-fonce = 5.63:1). --azur seul (3.38:1
   avec du blanc dessus) echoue AA et ne sert donc jamais de fond a du texte. */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:600;font-size:1rem;
  padding:.88em 1.7em;border-radius:12px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bouton-plein{
  background:linear-gradient(180deg,var(--azur-fonce) 0%,#075676 100%);
  color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 6px 16px rgba(10,111,150,.3);
}
.bouton-plein:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px rgba(10,111,150,.36)}
.bouton-clair{
  background:var(--blanc);color:var(--encre);border-color:var(--trait);
  box-shadow:var(--ombre-douce);
}
.bouton-clair:hover{transform:translateY(-2px);box-shadow:var(--ombre-levee);border-color:var(--azur)}
.bouton-petit{padding:.58em 1.15em;font-size:.92rem;border-radius:10px;white-space:nowrap}

/* ===== HERO =====
   Exigence proprietaire : fond teinte, degrade azur, jamais de blanc nu (consignes-sections.md
   §2). Ronde de correction 1 : les halos etaient a .28/.16, trop pales face a la reference
   AppliAtelierSiteWebLM (.5/.4) -- remontes au meme niveau. Le degrade de base reste dans la
   famille azur-voile (E8F4FA -> D6EDF6) : les marges de contraste y sont fines une fois les
   halos plus opaques superposes, donc mesure PIXEL REEL apres rendu (capture d'ecran + lecture
   RGBA, pas de calcul theorique sur le CSS seul) au point le plus sombre sous chaque bloc de
   texte -- tableau dans le rapport de tache. */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--azur-voile) 0%,#D6EDF6 55%,var(--azur-voile) 100%);
  padding:clamp(64px,10vw,120px) 0 clamp(52px,8vw,92px)}
.hero-halo{position:absolute;border-radius:50%;filter:blur(95px);pointer-events:none}
.hero-halo-1{width:520px;height:520px;background:var(--azur);opacity:.5;top:-260px;right:-180px}
.hero-halo-2{width:420px;height:420px;background:var(--azur-fonce);opacity:.4;bottom:-230px;left:-150px}
.hero-rang{position:relative;z-index:1}
.hero h1{max-width:15ch}
.hero-chapo{font-size:1.14rem;max-width:62ch;margin-top:.7em;color:var(--encre)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.7em;max-width:none}
/* La ligne de credibilite est assise dans le coin bas-gauche du hero, exactement la ou vit
   le halo-2 (comme sur AppliAtelierSiteWebLM) : au pixel le plus sombre mesure a cet endroit
   (capture d'ecran reelle, recherche exhaustive pixel par pixel -- pas un calcul theorique),
   --encre-doux tombe a 3.23:1 (echec AA net). #354453 (plus sombre qu'--encre-doux, plus clair
   qu'--encre) y tient a 5.66:1, marge confortable -- cf. tableau du rapport de tache. */
.hero-trust{margin-top:1.6em;font-size:.92rem;color:#354453}

/* ===== GISEMENTS =====
   Meme grammaire que "Ce que l'on optimise pour vous" sur AppliAtelierSiteWebLM, recoloree en
   azur (vert-clair/vert-fonce -> azur-voile/azur-fonce). */
.chapo{color:var(--encre-doux);font-size:1.06rem;max-width:60ch;margin-bottom:2.3em}
.commandes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.commande{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:28px 28px 26px;box-shadow:var(--ombre-douce);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.commande:hover{transform:translateY(-4px);box-shadow:var(--ombre-levee);border-color:var(--azur)}
.commande-icone{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--azur-voile);color:var(--azur-fonce);margin-bottom:1em}
.commande-icone svg{width:22px;height:22px}
.commande h3{color:var(--encre)}
.commande p{color:var(--encre-doux);font-size:.97rem;margin:0}
.commande p strong{color:var(--encre)}
.commandes-note{margin-top:2em;font-size:1.02rem}
/* Callout anti-hype (consignes-sections.md §5) : fond teinte + filet, jamais de texte en
   --azur (le corps reste en --encre, 12.57:1 sur azur-voile). */
.ia-limites{margin-top:1.6em;background:var(--azur-voile);border-left:4px solid var(--azur);
  border-radius:12px;padding:22px 26px;font-size:.99rem}
.gisements-chute{margin-top:2em;font-size:1.06rem;max-width:74ch}

/* ===== MESURE =====
   Section teintee (alternance des fonds, consignes-sections.md §2) : #gisements clair,
   #mesure sur --azur-voile, #preuve repasse clair. Duo de cartes repris de #gisements sur
   AppliAtelierSiteWebLM, mais differencie par une seule teinte (azur/azur-fonce) : ce site
   n'a pas de deuxieme couleur de marque comme le vert/bleu de L'Atelier.
   .chapo (definie plus haut, color:--encre-doux) n'est pas garantie sur --azur-voile par le
   tableau de contrastes du brief (seul --encre/--azur-voile y est mesure, 12.57:1) -- plutot
   que de calculer --encre-doux/--azur-voile a la main, on force --encre ici : la seule paire
   documentee comme sure sur fond teinte. */
.bloc-voile .chapo{color:var(--encre)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:2.2em}
.duo-carte{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:28px 28px 26px;box-shadow:var(--ombre-douce)}
.duo-carte h3{margin-bottom:.7em}
.duo-carte ul{list-style:none;padding:0;margin:0}
.duo-carte li{position:relative;padding-left:26px;margin-bottom:.6em;color:var(--encre-doux);font-size:.97rem}
.duo-carte li::before{position:absolute;left:0;top:.05em;font-weight:700}
.duo-etude{border-top:3px solid var(--azur)}
.duo-etude h3{color:var(--azur-fonce)}
.duo-etude li::before{content:"+";color:var(--azur)}
.duo-serieux{border-top:3px solid var(--azur-fonce)}
.duo-serieux h3{color:var(--azur-fonce)}
.duo-serieux li::before{content:"\2022";color:var(--azur-fonce)}

/* Argument de filiation (consignes-sections.md §1, "la phrase a tenir") : carte blanche sur
   fond teinte, pour se detacher du bloc-voile qui l'entoure -- traitement inverse de
   .ia-limites (callout teinte sur fond clair dans #gisements). Texte en --encre par heritage
   du body (13.79:1 sur blanc), jamais en --azur. */
.mesure-filiation{background:var(--blanc);border-left:4px solid var(--azur-fonce);
  border-radius:12px;padding:22px 26px;font-size:.99rem;box-shadow:var(--ombre-douce)}

/* Constat d'echec du marche (retour proprietaire 2026-09-24) : il ouvre #mesure et justifie
   la methode. Meme traitement que .mesure-filiation -- carte blanche sur le bloc-voile, car
   .ia-limites (fond --azur-voile) serait INVISIBLE ici : #mesure porte deja ce fond.
   Lien en --azur-fonce sur blanc = 5.63:1, AA tenu (jamais --azur, 3.38:1). */
.mesure-constat{background:var(--blanc);border-left:4px solid var(--azur);
  border-radius:12px;padding:22px 26px;font-size:1.02rem;box-shadow:var(--ombre-douce);
  margin-bottom:2.3em;max-width:74ch}
.mesure-constat a{color:var(--azur-fonce);text-decoration:underline;text-underline-offset:3px}
.mesure-constat a:hover{color:var(--encre)}

/* ===== PREUVE =====
   Fond clair (alternance). Meme grammaire que .commande (#gisements) : pastille --azur-voile /
   glyphe --azur-fonce, jamais un trait gris (consignes-sections.md §2). */
.preuves{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.preuve{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:28px 28px 26px;box-shadow:var(--ombre-douce);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.preuve:hover{transform:translateY(-4px);box-shadow:var(--ombre-levee);border-color:var(--azur)}
.preuve-icone{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--azur-voile);color:var(--azur-fonce);margin-bottom:1em}
.preuve-icone svg{width:22px;height:22px}
.preuve h3{color:var(--encre)}
.preuve p{color:var(--encre-doux);font-size:.97rem;margin:0}

/* ===== DEROULE =====
   Section teintee (alternance : #preuve claire, #deroule voile, #outils claire). Meme
   grammaire que "Cinq etapes, sans cahier des charges" sur AppliAtelierSiteWebLM, recoloree
   en azur : cartes blanches sur --azur-voile, badge numerote plein plutot qu'un trait gris
   (consignes-sections.md §2). */
.etapes{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 30px;margin-top:.4em}
.etape{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:26px 26px 24px;box-shadow:var(--ombre-douce);position:relative}
.etape-num{position:absolute;top:-14px;left:26px;width:30px;height:30px;border-radius:9px;
  background:var(--azur-fonce);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:700;font-size:.95rem;box-shadow:0 4px 12px rgba(10,111,150,.35)}
.etape h3{margin-top:.35em;color:var(--encre)}
.etape p{color:var(--encre-doux);font-size:.97rem;margin:.4em 0 0}
/* 5 etapes (nombre impair) : la derniere occupe la largeur au lieu de laisser un trou. */
.etapes > .etape:last-child:nth-child(odd){grid-column:1 / -1}

/* ===== OUTILS =====
   Fond clair (alternance). Meme grammaire pastille que .commande/.preuve : fond --azur-voile,
   glyphe --azur-fonce, jamais un trait gris. */
.outils-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:.4em}
.outil{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;
  padding:28px 26px 26px;box-shadow:var(--ombre-douce);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.outil:hover{transform:translateY(-4px);box-shadow:var(--ombre-levee);border-color:var(--azur)}
.outil-icone{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--azur-voile);color:var(--azur-fonce);margin-bottom:1em}
.outil-icone svg{width:22px;height:22px}
.outil h3{color:var(--encre)}
.outil p{color:var(--encre-doux);font-size:.97rem;margin:0}
.outils-arbitrage{margin-top:2em;font-size:1.02rem;max-width:74ch}
/* Pointeur contextuel vers L'Atelier IT (consignes-sections.md §7) : en fin de section
   seulement, meme traitement que .ia-limites (fond teinte + filet, jamais de texte en --azur). */
.outils-passerelle{margin-top:1.6em;background:var(--azur-voile);border-left:4px solid var(--azur);
  border-radius:12px;padding:22px 26px;font-size:.99rem;max-width:none}

/* ===== MAISONS =====
   Passerelle argumentee vers les deux maisons soeurs (consignes-sections.md §7, tableau
   §3bis). Fond teinte, alternance : #outils claire -> #maisons voile. Couleurs empruntees
   aux deux autres maisons (--cid-orange, --atelier-vert, definies en :root), uniquement ici. */
.maisons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:.4em}
.maison{background:var(--blanc);border:1px solid var(--trait);border-top:3px solid var(--trait);
  border-radius:16px;padding:26px 26px 24px;box-shadow:var(--ombre-douce);
  display:flex;flex-direction:column;gap:.65em}
.maison h3{color:var(--encre);margin:0}
.maison-role{color:var(--encre-doux);font-size:.97rem;margin:0}
.maison-role strong{color:var(--encre)}
.maison-moyen{color:var(--encre-doux);font-size:.92rem;margin:0}
.maison-lien{margin:auto 0 0;padding-top:.3em}
.maison-lien a{font-weight:600;color:var(--azur-fonce)}
/* Badge "Vous y etes" : azur-fonce sur azur-voile, 5.03:1 (table de contrastes). */
.maison-courante{align-self:flex-start;font-family:var(--titre);font-weight:700;font-size:.74rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--azur-fonce);background:var(--azur-voile);
  border-radius:999px;padding:.3em .85em}
.maison-cid{border-top-color:var(--cid-orange)}
.maison-atelier{border-top-color:var(--atelier-vert)}
.maison-accelerateur{border-top-color:var(--azur-fonce)}
.maisons-note{margin-top:2em;font-size:1.02rem;max-width:74ch}

/* ===== PARLER (bloc final / contact) =====
   Toujours teinte, meme hors alternance (consignes-sections.md §2, "Bloc final / contact").
   Ronde de correctifs 1 (Mineur 1, arbitrage du lead) : avec 7 sections + un bloc final a
   regle propre, l'alternance stricte est arithmetiquement impossible -- #maisons reste sur
   --azur-voile (juste avant), donc #parler ne peut plus se distinguer avec la meme teinte
   claire (meme fond, colle a la section precedente). Traitement distinct et plus soutenu :
   fond plein --azur-fonce. Changer ce fond change le second terme de TOUTES les paires de
   contraste de la section -- pas seulement le texte principal (lecon de la ronde 2, qui a
   trouve 3 regressions issues de ce seul changement : anneau de focus, mention, boutons).
   Paires reellement employees ici, toutes verifiees ronde 2 (mesures dans le rapport) :
   blanc sur --azur-fonce 5.63:1 (surtitre, h2, chapo, bouton secondaire) ;
   --azur-fonce sur blanc 5.64:1 (bouton principal invertit) ;
   --azur-voile sur --azur-fonce 5.03:1 (mention -- meme paire que --azur-fonce sur
   --azur-voile deja dans la table du haut, le ratio de contraste est symetrique) ;
   blanc sur --azur-fonce 5.63:1 (anneau de focus, remplace --azur qui n'y tient qu'a 1.67:1). */
.ouverture-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.9em;max-width:none}
.mention{color:var(--encre-doux);font-size:.93rem;margin-top:1.5em}
.bloc-final{text-align:center;background:var(--azur-fonce)}
.bloc-final .surtitre{justify-content:center;color:#fff}
.bloc-final .surtitre::before{background:#fff}
.bloc-final h2{color:#fff}
.bloc-final .chapo,.bloc-final p{margin-left:auto;margin-right:auto;color:#fff}
/* Ronde 2, R2 : l'opacite fabriquait une couleur hors table, a 0.03 de l'echec. Couleur
   explicite a la place -- le jeton --azur-voile est deja mesure (5.03:1 ici, symetrique de
   la paire deja connue), la marge est reelle, pas un arrondi de rendu. */
.bloc-final .mention{color:var(--azur-voile)}
.bloc-final .ouverture-actions{justify-content:center}
/* Ronde 2, R1 : l'anneau de focus global (--azur) tombe a 1.67:1 sur ce fond sombre --
   sous le seuil de 3:1 pour un indicateur non textuel. Blanc (5.63:1) rattrape, cantonne a
   cette section : la regle globale reste --azur ailleurs, ou le fond est clair. */
.bloc-final :focus-visible{outline-color:#fff}
/* Bouton plein invertit sur fond sombre : blanc/azur-fonce (5.64:1, table plus haut) --
   sinon le bouton se fondrait dans le fond, meme teinte de base. C'est le bouton PRINCIPAL
   (correctif I1 : la place revient au mailto) -- le blanc plein est deja le maximum de
   presence possible sur ce fond, impossible de le renforcer davantage. */
.bloc-final .bouton-plein{background:#fff;color:var(--azur-fonce);
  box-shadow:0 1px 0 rgba(10,111,150,.08) inset, 0 6px 16px rgba(5,30,45,.22)}
.bloc-final .bouton-plein:hover{box-shadow:0 1px 0 rgba(10,111,150,.08) inset, 0 10px 24px rgba(5,30,45,.28)}
/* Ronde 2, R3 : .bouton-clair etait deja blanc par defaut -- sur ce fond, il devenait
   indiscernable du bouton principal (deux pastilles blanches). C'est le bouton SECONDAIRE :
   on le recule (fond transparent, filet et texte blancs, 5.63:1) plutot que de tenter de
   renforcer le principal, deja au maximum. */
.bloc-final .bouton-clair{background:transparent;border-color:#fff;color:#fff;box-shadow:none}
.bloc-final .bouton-clair:hover{border-color:#fff;box-shadow:none;background:rgba(255,255,255,.1)}

/* ===== WIDGET ASSISTANT =====
   Meme grammaire que AppliAtelierSiteWebLM, recoloree en azur. Une seule teinte de marque
   ici (pas de --bleu comme L'Atelier) : les messages "moi" reprennent --azur-fonce. */
.chat-bulle{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;
  border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--azur) 0%,var(--azur-fonce) 100%);
  box-shadow:0 8px 24px rgba(10,111,150,.35);
  display:flex;align-items:center;justify-content:center;transition:transform .18s ease}
.chat-bulle:hover{transform:translateY(-3px) scale(1.04)}
.chat-bulle svg{width:26px;height:26px}
.chat-panneau[hidden]{display:none}
.chat-panneau{position:fixed;right:22px;bottom:92px;z-index:70;width:min(360px,calc(100vw - 44px));
  background:var(--blanc);border:1px solid var(--trait);border-radius:18px;
  box-shadow:0 18px 50px rgba(12,46,69,.22);display:flex;flex-direction:column;overflow:hidden}
.chat-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;background:var(--azur-voile);border-bottom:1px solid var(--trait);
  font-family:var(--titre);font-weight:600;color:var(--encre)}
.chat-fermer{background:none;border:none;font-size:1.35rem;line-height:1;cursor:pointer;color:var(--encre-doux)}
.chat-fil{padding:14px 16px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.chat-msg{font-size:.94rem;padding:.62em .9em;border-radius:12px;max-width:88%;white-space:pre-wrap}
.chat-bot{background:var(--azur-voile);color:var(--encre);align-self:flex-start;border-bottom-left-radius:4px}
.chat-moi{background:var(--azur-fonce);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-saisie{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--trait)}
.chat-saisie #chat-input{flex:1;min-width:0;border:1px solid var(--trait);border-radius:10px;
  padding:.6em .8em;font-family:var(--texte);font-size:.94rem;color:var(--encre);background:var(--papier)}
.chat-saisie #chat-input:focus{outline:none;border-color:var(--azur)}
#chat-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Bouton micro (dictee vocale) : injecte par chat.js seulement si le navigateur supporte
   la Web Speech API. En ecoute : pastille azur + pulsation (coupee si animations limitees). */
.chat-micro{flex:none;align-self:center;width:38px;height:38px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--blanc);border:1px solid var(--trait);color:var(--encre-doux);
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.chat-micro svg{width:18px;height:18px}
.chat-micro:hover{color:var(--azur-fonce);border-color:var(--azur)}
.chat-micro.ecoute{background:var(--azur);border-color:var(--azur);color:#fff;
  animation:chat-micro-pulse 1.5s ease-out infinite}
@keyframes chat-micro-pulse{
  0%{box-shadow:0 0 0 0 rgba(14,150,200,.5)}
  70%{box-shadow:0 0 0 9px rgba(14,150,200,0)}
  100%{box-shadow:0 0 0 0 rgba(14,150,200,0)}
}
@media (prefers-reduced-motion:reduce){.chat-micro.ecoute{animation:none}}

.chat-mention{margin:0;padding:0 14px 12px;font-size:.72rem;color:var(--encre-doux);max-width:none}
/* Mode degrade (ronde 1, B1) : ni champ, ni micro, ni bouton Envoyer -- seul un lien e-mail
   cliquable, sous le message de repli du fil. Meme famille visuelle que .chat-saisie
   (separateur --trait au-dessus) pour que le panneau reste coherent sans formulaire. */
.chat-degrade{margin:0;padding:12px 16px 16px;border-top:1px solid var(--trait);text-align:center}
.chat-degrade a{font-weight:600}
@media(max-width:520px){
  .chat-panneau{right:12px;left:12px;width:auto;max-width:calc(100vw - 24px);bottom:86px}
  .chat-bulle{right:14px;bottom:14px}
}

/* ===== EN-TETE ===== */
.entete{position:sticky;top:0;z-index:60;background:rgba(251,253,254,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.entete-rang{display:flex;align-items:center;gap:22px;height:80px}
.marque{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre)}
.marque-pastille{flex:none;width:42px;height:42px;border-radius:11px;
  background:var(--blanc) url('../../favicon.ico') center/70% no-repeat;
  border:1px solid var(--trait);box-shadow:var(--ombre-douce)}
.marque-texte{display:flex;flex-direction:column;line-height:1.12}
.marque-nom{font-family:var(--titre);font-weight:800;font-size:1.24rem;letter-spacing:-.02em}
.marque-accent{color:var(--azur-fonce)}
.marque-sous{font-size:.72rem;color:var(--encre-doux)}

.menu{display:flex;gap:16px;margin-left:auto}
.menu a{color:var(--encre);text-decoration:none;font-size:.92rem;font-weight:500;
  padding:.3em 0;border-bottom:2px solid transparent;white-space:nowrap;transition:border-color .15s,color .15s}
.menu a:hover{border-bottom-color:var(--azur);color:var(--azur-fonce)}
.menu-bouton{display:none;background:var(--blanc);border:1px solid var(--trait);border-radius:10px;
  color:var(--encre);font-size:1.15rem;padding:.35em .6em;cursor:pointer;box-shadow:var(--ombre-douce)}

/* ===== PIED ===== */
/* ===== BANDEAU DES TROIS MAISONS =====
   Dispositif IDENTIQUE dans les trois depots (garde anti-divergence : tests/test-bandeau.mjs).
   Permanent et discret, en PIED de page : consignes-sections.md §7 -- jamais en haut, on ne
   fait pas sortir un lecteur avant qu'il ait lu.

   Ce bandeau a son propre fond (--azur-voile) : toutes ses paires de contraste ont donc
   --azur-voile pour second terme, y compris l'anneau de focus et les filets.
     --encre sur --azur-voile        12.57:1  phrase du bandeau
     --encre-doux sur --azur-voile    5.08:1  sous-titres <small>
     --cid-fonce sur --azur-voile     5.38:1  nom de ContinuIT Delivery   PAIRE NEUVE
     --azur-fonce sur --azur-voile    5.03:1  nom de l'Accelerateur, et ANNEAU DE FOCUS
     --atelier-fonce sur --azur-voile 4.74:1  nom de L'Atelier IT         PAIRE NEUVE

   POURQUOI PAS LES TEINTES DE MARQUE TELLES QUELLES. Le nom de chaque maison porte desormais
   sa couleur. Sur papier il faut la DESCENDRE, pas la monter comme sur le site CID :
   --cid-orange vaut 1.89:1 ici et --atelier-vert 3.02:1, aucune ne peut porter de texte. On
   prend la meme teinte assombrie. Regle valable pour les trois depots : couleur claire sur
   fond sombre, couleur foncee sur fond clair. La plus juste des trois est --atelier-fonce a
   4.74:1 : elle passe le seuil texte de 0,24, il n'y a pas de marge pour eclaircir ce fond.
     --azur sur --azur-voile          3.02:1  PAIRE NEUVE (absente de la table du §3). Elle
       passe le seuil 3:1 des indicateurs non textuels, mais de 0,02. L'anneau de focus
       global (:focus-visible, outline --azur, 3.31:1 sur --papier) tomberait donc a 3.02
       ici : il est REDEFINI en --azur-fonce (5.03:1), paire garantie. Changer un fond,
       c'est changer le second terme de TOUTES ses paires.

   Les pastilles suivent le nom en `currentColor` : elles valent donc exactement les trois
   paires de noms ci-dessus (4.74 a 5.38:1), la ou elles tombaient entre 1.89 et 3.02:1 en
   teintes de marque pleines -- la pastille ContinuIT, a 1.89:1, etait la plus faible du
   bandeau. Elles restent aria-hidden et strictement redondantes avec le nom ecrit a cote :
   l'information ne passe jamais par la couleur seule (1.4.1).
     --trait sur --azur-voile         1.12:1  filet bas, decoratif
   Les trois anneaux de marque de l'embleme sont du meme ordre, et pour la meme raison : ils
   doublent un nom ecrit a cote, ils ne portent aucune information a eux seuls.
     #D97E4A (orange CID) sur --azur-voile   2.67:1
     #2E9E6B (vert Atelier) sur --azur-voile 3.02:1
     #0E96C8 (azur Accelerateur) sur --azur-voile 3.02:1
   Entre elles : les trois teintes foncees restent proches en luminance (1.06 a 1.14:1) --
   elles ne se distinguent que par la teinte, et seraient confondues en niveaux de gris, comme
   l'etaient --azur et --atelier-vert (1.00:1). Le nom ecrit a cote est ce qui porte
   l'information ; la couleur n'est qu'un rappel.
   CE QUI A CHANGE ICI, ET C'EST LE POINT DELICAT DE CE SITE : le nom de l'Accelerateur est
   desormais en --azur-fonce, c'est-a-dire dans la couleur des liens (`a{color:...}`) -- alors
   que c'est la marque courante, et donc le seul des trois qui N'EST PAS un lien. La remarque
   precedente (« aucun texte du bandeau n'est en --azur ») ne tient plus. C'est le prix du
   dispositif demande : la couleur d'accent d'un site EST sa couleur de marque. Ce qui
   distingue le lien du non-lien ne passe donc plus du tout par la couleur, mais par trois
   signaux qui ne sont pas chromatiques : le soulignement au survol et le curseur (liens
   seulement), le badge « VOUS Y ETES » en capitales, et `aria-current="page"`. --azur plein
   reste, lui, interdit au texte (3.02:1). */
.bandeau{background:var(--azur-voile);border-bottom:1px solid var(--trait);padding:30px 0 26px}
.bandeau-rang{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
/* ===== L'EMBLEME DES TROIS MAISONS =====
   Trois anneaux borromeens -- aucun ne peut etre retire sans que les deux autres se separent --
   dans un anneau qui les contient : trois marques, une seule production. Les trois couleurs
   sont celles des trois maisons (orange CID, vert L'Atelier, azur Accelerateur).

   Il est EN LIGNE dans index.html, identique dans les trois depots, et ne depend d'aucun
   fichier. Un seul endroit a toucher pour le faire evoluer : la balise `.bandeau-logo`.

   L'ANNEAU CONTENANT EST EN `currentColor`, et c'est ici qu'il prend sa valeur. C'est la
   seule concession au site : un anneau navy sur le fond navy du site CID tombe a 1,74:1 --
   invisible. Le dessin reste identique partout ; seule sa couleur de cadre suit le fond,
   comme toute autre regle .bandeau* de cette feuille.
     --cid-bleu #1F4E8C sur --azur-voile   7,42:1  l'anneau contenant, ici
   Les trois anneaux de marque, eux, sont ecrits en dur dans le SVG (ce sont des couleurs de
   marque, pas des couleurs de site) : leurs mesures sont dans le bloc BANDEAU ci-dessus.

   Il ouvre le bandeau, sur sa PROPRE LIGNE, centre au-dessus de la phrase -- premier enfant
   de `.bandeau-rang`. Place entre deux marques, il etait decale de 59 px a droite : un
   embleme "au centre" qui ne l'etait pas. tests/test-bandeau.mjs verrouille cette position.
   La boite fait 64 x 64 px a TOUTES les largeurs : c'est une contrainte de dessin stable.
   Aucun border-radius, aucun fond : ils rogneraient ou saliraient le dessin. */
.bandeau-logo{flex:none;display:block;width:64px;height:64px;color:var(--cid-bleu)}
.bandeau-phrase{margin:0;max-width:none;font-family:var(--titre);font-weight:600;
  font-size:1.02rem;color:var(--encre)}
.bandeau-marques{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:16px 34px;width:100%;max-width:880px;margin-top:2px}
.bandeau-marque{display:block;flex:0 1 auto;font-family:var(--titre);font-weight:600;font-size:.95rem;
  text-decoration:none;border-radius:8px}
/* CHAQUE NOM PORTE LA COULEUR DE SA MAISON, la courante comprise -- c'est le dispositif
   demande. La pastille suit en `currentColor` : une seule source de verite par maison, et
   plus de risque de voir le point et le nom diverger de deux nuances d'azur. */
.bandeau-cid{color:var(--cid-fonce)}
.bandeau-atelier{color:var(--atelier-fonce)}
.bandeau-accelerateur{color:var(--azur-fonce)}
a.bandeau-marque:hover{text-decoration:underline;text-underline-offset:4px}
.bandeau-marque small{display:block;font-family:var(--texte);font-weight:400;
  font-size:.82rem;line-height:1.4;color:var(--encre-doux)}
/* « VOUS Y ETES » EN CAPITALES : le marqueur de la marque courante ne passe plus par la
   couleur (elle porte desormais sa teinte de maison comme les deux autres), et il en a
   d'autant plus besoin ICI -- le nom de l'Accelerateur est en --azur-fonce, exactement la
   couleur des liens de ce site (`a{color:var(--azur-fonce)}`), alors qu'il n'est pas un lien.
   Ce badge reprend la forme de `.maison-courante` plus haut dans cette meme feuille :
   capitales, gras, corps reduit. Typographique et non chromatique, il tient en niveaux de
   gris comme en couleur, et il double `aria-current="page"` que lisent les technologies
   d'assistance. Les deux vrais liens, eux, se signalent par le soulignement au survol et par
   l'anneau au focus -- jamais par la seule couleur. */
.bandeau-marque[aria-current="page"] small{font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.74rem}
.bandeau-pastille{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:8px;vertical-align:.08em;background:currentColor}
.bandeau :focus-visible{outline-color:var(--azur-fonce)}
/* L'ANNEAU DE FOCUS SUIT LE NOM, en `currentColor`. Un anneau orange autour d'un nom vert se
   voyait parfaitement mais jurait. Surtout, cette forme est SURE PAR CONSTRUCTION : un
   indicateur non textuel demande 3:1, un texte 4,5:1 ; toute couleur assez lisible pour ecrire
   le nom l'est donc a fortiori pour en tracer l'anneau. Mesures du jour sur le rendu :
   5.38:1 (ContinuIT), 4.74:1 (L'Atelier), 5.03:1 (Accelerateur).
   Le reste du bandeau garde l'anneau general defini juste au-dessus. */
.bandeau-marque:focus-visible{outline-color:currentColor}

@media (max-width:620px){
  .bandeau{padding:24px 0 22px}
  .bandeau-marques{flex-direction:column;gap:14px;max-width:340px}
}

.pied{border-top:1px solid var(--trait);background:var(--papier)}
.pied-rang{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;padding-top:24px;padding-bottom:28px}
.pied-marque{font-family:var(--titre);font-weight:600;margin:0}
.pied-menu{display:flex;flex-wrap:wrap;gap:18px;margin-left:auto}
.pied-menu a{color:var(--encre-doux);text-decoration:none;font-size:.9rem}
.pied-menu a:hover{color:var(--azur-fonce)}
.pied-legal{margin:0;color:var(--encre-doux);font-size:.9rem}


/* ===== PAGE LEGALE (confidentialite.html) =====
   Meme coque que le site (entete, pied, jetons) ; la page elle-meme reste sobre. Un seul fond
   teinte y est employe, --azur-voile : chapeau, marqueurs "a completer", entetes de tableau.

   ANNEAU DE FOCUS REDEFINI, et ce n'est pas une precaution de style. La regle globale
   :focus-visible{outline:3px solid var(--azur)} vaut 3.31:1 sur --papier, mais tombe a 3.02:1
   des qu'elle se pose sur --azur-voile : conforme de 0.02 au seuil 3:1 des indicateurs non
   textuels (consignes-sections.md §3 -- le piege s'est deja presente deux fois sur ce site).
   Cette page portant DEUX fonds, on prend une couleur qui tient sur les deux : --azur-fonce,
   5.52:1 sur --papier et 5.03:1 sur --azur-voile.

   Contrastes mesures de la page (calcul WCAG sur les jetons, verifie au pixel rendu) :
   --encre sur --papier            13.79:1  texte courant, cellules de tableau
   --encre sur --azur-voile        12.57:1  chapeau, marqueurs, entetes de tableau
   --encre sur blanc               14.07:1  libelle du bouton "Retour au site"
   --encre-doux sur --papier        5.58:1  date de mise a jour, pied de page
   --azur-fonce sur --papier        5.52:1  liens, titres de section, anneau de focus
   --azur-fonce sur --azur-voile    5.03:1  liens en bloc teinte, anneau de focus
   --trait sur --papier             1.23:1  filets de tableau -- decoratif, jamais de texte */
.page-legale{max-width:820px;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(56px,8vw,96px)}
.page-legale :focus-visible{outline-color:var(--azur-fonce)}
.page-legale h1{font-size:clamp(1.9rem,4.4vw,3rem);max-width:18ch}
.page-legale h2{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:700;
  color:var(--azur-fonce);margin:2.1em 0 .6em}
.page-legale h2:first-of-type{margin-top:1.6em}
/* Meme justification que les paragraphes : la regle globale p{max-width:68ch} ne s'applique
   pas aux listes, qui prendraient sinon toute la largeur du conteneur (~764px contre ~578px
   pour un paragraphe). L'oeil voit alors deux mesures de ligne differentes dans une meme
   section -- la liste de la section 2 est arrivee apres le reste de la page. */
.page-legale ul{max-width:68ch;margin:0 0 1em;padding-left:1.25em}
.page-legale li{margin-bottom:.4em}

.legale-date{color:var(--encre-doux);font-size:.92rem;margin-bottom:1.5em}

.legale-chapeau{background:var(--azur-voile);border-left:4px solid var(--azur);
  border-radius:0 12px 12px 0;padding:18px 20px;font-size:1.05rem;color:var(--encre)}


/* TABLEAUX : le debordement est contenu par une ENVELOPPE, pas par le tableau lui-meme.
   Mesure a 375px : le tableau de la section 1 sortait a 404,6px pour un viewport de 375 --
   l'adresse e-mail du contact (28 caracteres insecables) imposait sa largeur a la colonne --
   et body{overflow-x:hidden} masquait ce debordement SANS barre de defilement, donc sans que
   rien ne le signale.
   Deux corrections ont ete essayees avant celle-ci :
   1. overflow-wrap:anywhere sur les cellules -- supprime bien le debordement (seul "anywhere"
      entre dans le calcul de min-content, contrairement a "break-word"), mais coupe alors
      n'importe quel mot : "Prestataire" rendu "Pres/tatai/re", "Google" en "Goo/gle". Corrige
      la mesure, abime la lecture.
   2. le motif du site CID, .tab-legale{display:block;overflow-x:auto} -- le tableau devient
      lui-meme la boite de defilement. Efficace, mais changer le `display` d'un <table> lui
      fait perdre son role de tableau dans l'arbre d'accessibilite : un lecteur d'ecran n'y
      voit plus des lignes et des colonnes, et l'association en-tete/cellule est perdue.
   D'ou l'enveloppe : le <table> garde son display, donc son role et ses en-têtes ; c'est un
   <div> parent qui defile. Meme rendu visuel, semantique intacte. min-width garde des
   colonnes lisibles plutot que de les ecraser. */

.tab-enveloppe{overflow-x:auto;margin:0 0 1.4em}
/* Pas de min-width : chaque tableau prend sa largeur min-content (aucun mot n'est coupe,
   overflow-wrap:break-word ci-dessous ne reduit pas min-content) et ne defile donc QUE s'il
   en a besoin. A 375px, les tableaux a 2 colonnes tiennent, celui a 3 colonnes defile seul. */
.tab-legale{width:100%;border-collapse:collapse;margin:0;font-size:.96rem}
.tab-legale th,.tab-legale td{text-align:left;vertical-align:top;padding:.7em .9em;
  border:1px solid var(--trait);overflow-wrap:break-word}
.tab-legale thead th{background:var(--azur-voile);font-family:var(--titre);font-weight:600;
  color:var(--encre)}
.tab-legale tbody th[scope="row"]{background:var(--azur-voile);font-weight:600;color:var(--encre);
  white-space:nowrap}
/* Le seul mot insecable de ces tableaux est l'adresse e-mail (28 caracteres) : c'est elle, et
   elle seule, qui imposait encore 7px de defilement au tableau de la section 1 a 375px.
   "anywhere" ne coupe que lorsque la place manque -- au large, l'adresse reste d'un seul
   tenant. Cible sur ce lien precis, pour ne pas rouvrir la coupure des mots ordinaires. */
.tab-legale a[href^="mailto:"]{overflow-wrap:anywhere}
.legale-a-completer{background:var(--azur-voile)}

/* Sur telephone, la gouttiere de .rang tombe a 16px (regle @media 430px) : on resserre les
   cellules dans le meme mouvement, sinon le padding mange la largeur utile du texte. */
@media(max-width:520px){
  .tab-legale{font-size:.9rem}
  .tab-legale th,.tab-legale td{padding:.6em .65em}
  .legale-chapeau{padding:14px 16px}
}

.entete-retour{margin-left:auto}

/* ===== PETITS ECRANS =====
   Seuil du menu : 1100px, pas 900. Mesure reelle (getBoundingClientRect) : le bouton
   "Nous ecrire" deborde du viewport entre 901 et ~991px (jusqu'a ~90px a 901px, decroissance
   quasi lineaire vers 0 a 991px) -- overflow-x:hidden sur body cache ce debordement sans le
   corriger, donc aucune barre de defilement ne le signale : le bouton reste alors en partie
   invisible ET non cliquable. 1100 (et non 991 pile) laisse une marge : si Google Fonts ne
   charge pas, le repli system-ui a des metriques plus larges qui peuvent rouvrir le trou
   pres du seuil mesure.
   La zone de resserrement (nav + entete-rang) est retunee en consequence : sous 1100 tout
   est deja en burger, donc son utilite commence a 1101 -- gardee jusqu'a 1280 ou la nav
   complete reste serree. Un seul mecanisme actif a la fois, pas de chevauchement. */
@media(min-width:1101px) and (max-width:1280px){.menu{gap:10px}.menu a{font-size:.82rem}.entete-rang{gap:14px}}

@media(max-width:1100px){
  .menu{position:fixed;inset:80px 0 auto;flex-direction:column;gap:2px;
    background:var(--papier);border-bottom:1px solid var(--trait);
    padding:14px 28px 20px;transform:translateY(-130%);transition:transform .28s ease;z-index:50}
  .menu.ouvert{transform:none}
  .menu a{padding:.6em 0}
  .menu-bouton{display:inline-flex;order:3}
  .bouton-petit{margin-left:auto}
}
@media(max-width:900px){
  .commandes,.duo,.preuves,.etapes,.outils-grille,.maisons{grid-template-columns:1fr}
  .ouverture-actions .bouton{width:100%}
}
@media(max-width:520px){
  body{font-size:16px}
  .marque-sous{display:none}
  .hero-halo{display:none}
}
/* Ronde de correctifs 1 (B2) : sous ~430px, .marque-nom (1.24rem) + le bouton "Nous ecrire" +
   le burger ne tenaient plus dans la gouttiere de 28px de chaque cote (mesure : document a
   406px pour un viewport a 375px, burger coupe a 10px sur 41 -- overflow-x:hidden masquait le
   debordement sans barre de defilement pour le signaler). Cause corrigee ici (gouttiere,
   espacements et tailles reduits), pas seulement le symptome. Reteste a 320/360/375/390/414/430. */
@media(max-width:430px){
  .rang{padding:0 16px}
  .entete-rang{gap:8px}
  .marque{gap:8px}
  .marque-pastille{width:34px;height:34px}
  .marque-nom{font-size:.98rem}
  .bouton-petit{padding:.5em .8em;font-size:.82rem}
  .menu-bouton{padding:.3em .5em;font-size:1.02rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ===== LA RÉASSURANCE SOUS LE TITRE (retour proprietaire 2026-09-24) =====
   « Il faut qu'on donne confiance a cet endroit-la » : le hero vendait la methode sans dire
   POURQUOI elle est necessaire. On nomme l'echec du marche des la premiere lecture -- l'usine
   a gaz -- puis on dit ce qui nous autorise a pretendre le contraire : on l'utilise sur nous.
   Le detail chiffre et l'etude restent en #mesure : ici c'est l'accroche, pas la preuve. */
.hero-credo{font-size:1.06rem;max-width:66ch;margin-top:.9em;color:var(--encre)}
.hero-credo strong{color:var(--encre)}

/* ===== PASTILLES DE CERTIFICATION EN #mesure =====
   Meme dispositif que L'Atelier IT, recolore en azur. #mesure est sur --azur-voile : les
   pastilles sont donc des CARTES BLANCHES, comme .mesure-filiation -- une pastille teintee y
   serait invisible, fond sur fond (c'est l'erreur deja evitee pour .mesure-constat).
   Contrastes mesures sur blanc : intitule 5,63:1, ce qu'il prouve 5,69:1.
   L'intitule n'est JAMAIS en --azur (3,38:1, sous le seuil texte). */
.mesure-certifs{margin-top:2.2em}
.mesure-certifs-intro{color:var(--encre-doux);font-size:.99rem;margin:0 0 1.1em;max-width:70ch}
.reperes{list-style:none;display:flex;flex-wrap:wrap;gap:14px;padding:0;margin:0}
.reperes li{flex:1 1 210px;max-width:280px;background:var(--blanc);
  border:1px solid var(--trait);border-radius:12px;padding:16px 18px;
  box-shadow:var(--ombre-douce);transition:border-color .25s,transform .25s,box-shadow .25s}
.reperes li:hover{border-color:var(--azur-fonce);transform:translateY(-3px);
  box-shadow:var(--ombre-levee)}
.repere-valeur{display:block;font-family:var(--titre);font-weight:700;font-size:1rem;
  color:var(--azur-fonce)}
.repere-quoi{display:block;color:var(--encre-doux);font-size:.9rem;margin-top:.2em}

/* ===== LES DEUX CARTES DU DUO S'ENTOURENT AUSSI =====
   Elles etaient les dernieres de ce site sans etat de survol, alors que .commande, .preuve,
   .outil, .maison et .etape en ont toutes un. L'incoherence se voyait d'un bloc a l'autre. */
.duo-carte{transition:border-color .25s,transform .25s,box-shadow .25s}
.duo-carte:hover,.duo-carte:focus-within{border-color:var(--azur-fonce);
  transform:translateY(-4px);box-shadow:var(--ombre-levee)}