/* Contacts de confiance.
   Aucune couleur en dur : tout vient des jetons du design system (les
   seules valeurs brutes sont des transparences de la teinte de marque,
   comme dans tableau-de-bord.css).

   Sur le modele de la page « contacts de confiance » envoyee en
   reference : une carte de titre avec le bouton d'ajout, une ligne par
   place (soi-meme, puis deux contacts au maximum -- le plafond que le
   declencheur de la base impose aussi), puis une foire aux questions en
   accordeon. Les cartes, la barre laterale, les fenetres (.modale) et le
   bandeau de demonstration viennent de tableau-de-bord.css : ici, seulement
   ce qui est propre a cette page. */

/* Meme colonne que la vue d'ensemble : on ne touche NI a la largeur
   maximale NI aux marges laterales de .zone (tableau-de-bord.css). Une
   version precedente les resserrait pour donner plus de place au contenu ;
   resultat, passer de la vue d'ensemble a cette page faisait « sauter » le
   contenu de plusieurs centaines de pixels sur les cotes (sur demande
   expresse : aucune perturbation visuelle d'une page a l'autre). */
.zone.cc {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cc > * { min-width: 0; }

/* Paragraphes : le navigateur evite une derniere ligne reduite a un seul
   mot (« rien. »). Sans effet, sans dommage, la ou il n'est pas gere. */
.cc p,
.cc-tiroir p,
.modale p { text-wrap: pretty; }

html.cc-verrou { overflow: hidden; }

/* ═════════════════════════ Entete ═════════════════════════ */
/* Carte de marque : le degrade diagonal du design system (indigo profond vers
   violet median, comme la scene de l'etat vide du tableau de bord) plutot que
   la carte claire des autres pages, pour que « Contacts de confiance » ait
   une presence propre. Titre et bouton passent en « sur fonce » (jeton
   --on-dark, bouton .btn--on-dark).

   flex-wrap : quand la carte est trop etroite pour le titre ET le bouton
   cote a cote (fenetre reduite, entre la barre laterale et le mobile), le
   bouton passe sous le texte plutot que d'ecraser le titre sur trois
   lignes. */
.cc-entete {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  color: var(--on-dark);
  background:
    radial-gradient(90% 150% at 100% 0%, rgba(183,174,201,.30) 0%, transparent 62%),
    var(--brand-gradient-diag);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 1px 2px rgba(25,20,62,.12),
    0 18px 36px -18px rgba(25,20,62,.55);
  /* Les regles de largeur ci-dessous suivent la CARTE, pas la fenetre : avec
     la barre laterale, la colonne de contenu va de 194 a plus de 1000px pour
     une meme fenetre selon les marges. */
  container-type: inline-size;
}
/* Ondes concentriques tres pales, nees du coin haut droit et effacees vers
   la gauche : un rappel du « sonar » de l'etat vide du tableau de bord, qui
   ne passe jamais derriere le texte. */
.cc-entete::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 46px, rgba(255,255,255,.07) 46px 47px);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 65%);
  pointer-events: none;
}
/* Le contenu passe au-dessus des ondes (un element positionne se peint au
   dessus d'un element qui ne l'est pas, quel que soit l'ordre dans le DOM). */
.cc-entete > * { position: relative; }

.cc-entete__texte { flex: 1 1 340px; min-width: 0; }
.cc-entete__titre {
  margin: 0;
  /* Meme titre de bandeau que les autres pages (24px/700) : le 40px d'avant
     faisait de cette carte la plus grosse du site. */
  font-family: var(--font-display);
  font-size: var(--titre-bandeau-taille);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-dark);
}
/* « Contacts de confiance » ne passe jamais a la ligne quand la carte a la
   place de l'afficher en entier (titre de 40px = 451px, plus 2 x 32px de
   marge interne : 520px de carte, 540px par prudence) ; en dessous, il
   repasse a la ligne plutot que de deborder. min-width: min-content empeche
   aussi le texte de se laisser ecraser par le bouton : c'est le bouton qui
   descend sous le titre (flex-wrap) quand tout ne tient pas cote a cote. */
@container (min-width: 540px) {
  .cc-entete__titre { white-space: nowrap; }
  .cc-entete__texte { min-width: min-content; }
}
/* Deux phrases, chacune sur sa ligne : la definition, puis ce que ces
   personnes peuvent etre amenees a faire. */
.cc-entete__sous-titre {
  margin: var(--space-xs) 0 0;
  max-width: 58ch;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: rgba(255,255,255,.88);
}
.cc-entete__sous-titre span { display: block; }

/* Le cercle de droite porte un « + » : il tourne d'un quart de tour au
   survol plutot que de glisser comme la fleche des autres boutons. Le
   design system donne au bouton « sur fonce » le texte --action (3,9:1 sur
   blanc) ; ici l'indigo de marque, plus lisible. */
.cc-ajouter { flex: 0 0 auto; }
.cc-entete .cc-ajouter { color: var(--brand-1); }
.cc-ajouter .btn__fleche { transition: transform var(--dur-base) var(--ease-standard); }
.cc-ajouter:hover .btn__fleche { transform: rotate(90deg); }
.cc-ajouter:disabled { opacity: .5; cursor: not-allowed; }
.cc-ajouter:disabled:hover {
  background: var(--canvas);
  transform: none;
  box-shadow: none;
}
.cc-ajouter:disabled:hover .btn__fleche { transform: none; }
/* L'anneau de focus du design system est indigo : invisible sur ce fond. */
.cc-entete .btn:focus-visible { box-shadow: 0 0 0 3px var(--brand-2), 0 0 0 5px var(--on-dark); }

/* ── Le cercle de confiance ──
   Une bande pleine largeur sous le titre, presente des qu'il y a un compte :
   l'anneau dit combien de places sur trois sont prises, les pastilles qui
   sont dans le cercle (initiales de l'aidant puis de ses contacts, autant
   que de personnes), et le texte ce qu'il reste a faire. Avec 1 ou 2
   personnes elle est indigo et l'anneau partiel (« 2/3 ») ; a trois elle
   passe au vert, le meme « tout est en place » que « Protection active et a
   jour » du tableau de bord : l'anneau se ferme, une coche le clot. Un
   bouton grise n'aurait rien explique.

   Le degre de remplissage est la variable --p (0 a 1), posee par
   majEntete() : l'anneau est un trace de longueur 1 (pathLength) dont on ne
   montre que la part --p.

   L'etat par defaut est l'etat FINAL. L'animation, posee seulement quand une
   personne EST AJOUTEE pendant que la page est ouverte (voir majEntete()),
   part de « vide » avec "backwards" : une animation qui ne se declencherait
   pas ne doit jamais laisser une bande a moitie dessinee. Au retrait, pas de
   fete : seules les transitions font glisser l'anneau et les couleurs vers
   le nouvel etat.

   Sequence (~2,7 s) :  .35 s l'anneau se trace jusqu'a sa part, puis .95 s
                              la coche (cercle complet) ou la fraction
                        .6 s  les pastilles arrivent l'une apres l'autre
                        1.4 s point d'orgue : un signal part de l'anneau, une
                              onde s'etend autour de la bande, un reflet la
                              traverse */
.cc-cercle {
  --cc-ton: var(--action-focus);
  --cc-fond: var(--action-tint);
  --cc-lisere: rgba(94,83,152,.24);
  --cc-onde: rgba(255,255,255,.42);
  position: relative;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, transparent 55%, rgba(255,255,255,.55) 100%),
    var(--cc-fond);
  box-shadow: inset 0 0 0 1px var(--cc-lisere), 0 12px 24px -16px rgba(10,7,40,.6);
  transition: background-color .5s var(--ease-standard), box-shadow .5s var(--ease-standard);
}
.cc-cercle--complet {
  --cc-ton: var(--signal-sur);
  --cc-fond: var(--signal-sur-tint);
  --cc-lisere: rgba(18,135,111,.24);
}
/* Le reflet : une bande claire, en biais, qui traverse le cadre une fois. Au
   repos elle attend hors du cadre, donc invisible. */
.cc-cercle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%);
  transform: translateX(-110%);
  pointer-events: none;
}
.cc-cercle__anneau { flex: 0 0 auto; overflow: visible; }
/* Le signal qui part de l'anneau au point d'orgue : invisible au repos. */
.cc-cercle__signal { fill: none; stroke: var(--cc-ton); stroke-width: 2; opacity: 0; transform-origin: center; }
.cc-cercle__fond { fill: var(--cc-ton); fill-opacity: .1; stroke: none; transition: fill .5s var(--ease-standard); }
.cc-cercle__piste { fill: none; stroke: var(--cc-lisere); stroke-width: 4; transition: stroke .5s var(--ease-standard); }
.cc-cercle__progres,
.cc-cercle__coche {
  fill: none;
  stroke: var(--cc-ton);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke .5s var(--ease-standard);
}
.cc-cercle__progres {
  stroke-dashoffset: calc(1 - var(--p, 1));
  transition: stroke-dashoffset .6s var(--ease-standard), stroke .5s var(--ease-standard);
}
/* La coche ne clot que l'anneau complet ; la fraction ne sert qu'avant. */
.cc-cercle:not(.cc-cercle--complet) .cc-cercle__coche { display: none; }
.cc-cercle--complet .cc-cercle__fraction { display: none; }
.cc-cercle__fraction {
  fill: var(--cc-ton);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.3px;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .5s var(--ease-standard);
}
/* Base 0 : le texte prend ce qui reste, mais sa largeur naturelle ne compte
   pas pour decider du retour a la ligne. Avec « auto », le texte entier
   (~400px) ne tenait pas a cote de l'anneau et sautait seul sur la ligne
   suivante, les pastilles encore en dessous : trois etages au lieu de deux. */
.cc-cercle__texte { flex: 1 1 0; min-width: 0; }
/* « .cc .cc-cercle__titre » : la regle « .cc p » (text-wrap: pretty) plus
   haut est plus specifique qu'un simple « .cc-cercle__titre » et gagnerait. */
.cc .cc-cercle__titre {
  margin: 0;
  text-wrap: balance;
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  line-height: 1.25;
  color: var(--cc-ton);
  transition: color .5s var(--ease-standard);
}
.cc-cercle__detail {
  margin: 2px 0 0;
  font-size: var(--text-caption-size);
  line-height: 1.45;
  color: var(--ink-muted-80);
}

/* Les membres du cercle, en pile : les initiales de l'aidant puis des
   contacts, dans l'ordre de la liste, autant que de personnes. Decoratif
   (aria-hidden) : la liste juste en dessous dit deja qui est qui. */
.cc-cercle__visages {
  flex: 0 0 auto;
  display: flex;
  padding-left: 6px;
}
/* Carte etroite : anneau plus petit, et les pastilles passent sous le texte,
   alignees sur lui. */
@container (max-width: 540px) {
  .cc-cercle {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
  .cc-cercle__anneau { width: 48px; height: 48px; }
  .cc-cercle__visages { flex: 1 0 100%; padding-left: calc(48px + var(--space-sm) + 6px); }
}
.cc-cercle__visage {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--action-tint-strong);
  color: var(--brand-3);
  font-size: var(--text-caption-size);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--canvas), 0 4px 10px -5px rgba(25,20,62,.4);
}

@keyframes ccAnneau { from { stroke-dashoffset: 1; } }
@keyframes ccFondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccGlisse {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes ccVisage {
  from { opacity: 0; transform: translateY(10px) scale(.5); }
  to { opacity: 1; transform: none; }
}
@keyframes ccFraction {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: none; }
}
@keyframes ccSignal {
  from { opacity: .55; transform: scale(1); }
  to { opacity: 0; transform: scale(1.75); }
}
@keyframes ccPouls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
@keyframes ccOnde {
  from { box-shadow: inset 0 0 0 1px var(--cc-lisere), 0 12px 24px -16px rgba(10,7,40,.6), 0 0 0 0 var(--cc-onde); }
  to { box-shadow: inset 0 0 0 1px var(--cc-lisere), 0 12px 24px -16px rgba(10,7,40,.6), 0 0 0 18px rgba(255,255,255,0); }
}
@keyframes ccReflet {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
@media (prefers-reduced-motion: no-preference) {
  /* La bande apparait avec les donnees (premier affichage) : un simple fondu.
     Il reste dans la liste d'animations de --anime : retirer ou ajouter la
     classe change de NOM d'animation, et un fondu qui « reviendrait » ferait
     clignoter la bande a chaque rendu. */
  .cc-cercle { animation: ccFondu .4s ease-out backwards; }
  .cc-cercle--anime { animation: ccFondu .4s ease-out backwards, ccOnde 1.3s ease-out 1.4s backwards; }
  .cc-cercle--anime::after { animation: ccReflet .95s ease-in-out 1.4s backwards; }
  .cc-cercle--anime .cc-cercle__fond { animation: ccFondu .5s ease-out .5s backwards; }
  /* Pas de transition d'anneau pendant l'animation : elle partirait de
     l'ancienne part et brouillerait le trace. */
  .cc-cercle--anime .cc-cercle__progres {
    transition: stroke .5s var(--ease-standard);
    animation: ccAnneau .8s var(--ease-standard) .35s backwards;
  }
  .cc-cercle--anime .cc-cercle__coche { animation: ccAnneau .45s var(--ease-standard) .95s backwards; }
  .cc-cercle--anime .cc-cercle__fraction { animation: ccFraction .45s cubic-bezier(.34, 1.56, .64, 1) 1s backwards; }
  .cc-cercle--anime .cc-cercle__anneau { animation: ccPouls .5s var(--ease-standard) 1.4s backwards; }
  .cc-cercle--anime .cc-cercle__signal { animation: ccSignal .95s ease-out 1.4s backwards; }
  .cc-cercle--anime .cc-cercle__texte { animation: ccGlisse .55s var(--ease-standard) .45s backwards; }
  .cc-cercle--anime .cc-cercle__visage {
    animation: ccVisage .6s cubic-bezier(.34, 1.56, .64, 1) calc(.6s + var(--i, 0) * .16s) backwards;
  }
}

/* La note sous l'entete. Deux lignes : ce qu'on peut faire, puis ce que ca
   change. Tant qu'il reste une place, teinte « vigilance » (comme l'avis de
   Reglages) ; quand le cercle est complet, teinte « information » (le vert
   est deja porte par la bande de l'entete : pas de vert sur vert). Aucune ne
   promet d'envoi : les contacts « pourront etre sollicites », ce qui reste
   vrai tant que l'envoi des alertes n'est pas branche (principe 8). */
.cc-avis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--signal-vigilance-tint);
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
  transition: background var(--dur-slow) var(--ease-standard);
}
.cc-avis svg { flex: 0 0 auto; margin-top: 2px; color: var(--signal-vigilance); }
.cc-avis__icone--ok { display: none; }
.cc-avis--ok { background: var(--action-tint); }
.cc-avis--ok svg { color: var(--action-focus); }
.cc-avis--ok .cc-avis__icone--invite { display: none; }
.cc-avis--ok .cc-avis__icone--ok { display: block; }
.cc-avis__texte { display: block; min-width: 0; }
.cc-avis__titre { display: block; font-weight: 600; color: var(--ink); }
.cc-avis__detail { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .cc-avis--anime .cc-avis__texte { animation: ccFondu .6s ease-out .45s backwards; }
}

.cc .comptes-switch { margin-bottom: 0; }

/* ═════════════════════════ Les places ═════════════════════════ */
.cc-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cc-ligne {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(240,238,251,.82) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.05),
    0 10px 24px -16px rgba(25,20,62,.22);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

/* "backwards", jamais "both" : meme raison que .carte (voir
   tableau-de-bord.css) -- "both" garderait la main sur transform apres
   l'entree. Posee seulement au premier affichage (voir rendre()), pas a
   chaque ajout ou retrait, sinon toute la liste rejouerait son entree. */
@media (prefers-reduced-motion: no-preference) {
  .cc-ligne--entree {
    animation: monte var(--dur-base) var(--ease-standard) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 90ms);
  }
}

.cc-ligne--chargement {
  justify-content: center;
  padding: var(--space-lg);
  color: var(--ink-muted-80);
}

.cc-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--action-tint-strong);
  color: var(--brand-3);
  font-size: var(--text-body-size);
  font-weight: 600;
  letter-spacing: 0;
  transition: transform var(--dur-base) var(--ease-standard);
}
/* Une place libre : pastille pleine et pictogramme « ajouter une
   personne », pour qu'on la distingue d'un coup d'oeil d'une place prise. */
.cc-avatar--vide { background: var(--brand-3); color: var(--on-dark); }

.cc-ligne__corps {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc-ligne__nom-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--space-sm);
}
.cc-ligne__nom {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cc-ligne__detail {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: 1.4;
  color: var(--ink-muted-80);
  overflow-wrap: anywhere;
}
.cc-ligne__meta {
  flex: 0 1 260px;
  min-width: 0;
  font-size: var(--text-caption-size);
  line-height: 1.4;
  color: var(--ink-muted-80);
  text-align: right;
  overflow-wrap: anywhere;
}

.cc-pastille {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--action-tint);
  color: var(--action-focus);
  font-size: var(--text-caption-size);
  font-weight: 600;
  line-height: 1.3;
}

.cc-action {
  flex: 0 0 auto;
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--text-body-size);
  font-weight: 700;
  color: var(--brand-3);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cc-action:hover { background: var(--action-tint); color: var(--brand-1); text-decoration: none; }
.cc-action:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
  box-shadow: none;
  border-radius: var(--radius-pill);
}
/* « Retirer » n'est pas un signal (jamais de rouge decoratif) : neutre. */
.cc-action--neutre { font-weight: 600; color: var(--ink-muted-80); }

.cc-ligne--vide { cursor: pointer; }
.cc-ligne--vide:hover {
  border-color: var(--action-tint-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(25,20,62,.06),
    0 14px 30px -16px rgba(25,20,62,.30);
}
.cc-ligne--vide:hover .cc-avatar--vide { transform: scale(1.07); }

/* Aucune personne protegee : rien a rattacher pour l'instant. */
.cc-ligne--sans-compte {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
}
.cc-ligne--sans-compte p { margin: 0; color: var(--ink-muted-80); line-height: 1.5; }

/* ═════════════════════════ Foire aux questions ═════════════════════════ */
.cc-faq { padding: var(--space-lg) var(--space-xl) var(--space-xs); }

.cc-faq__titre {
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline-alpha);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-1);
}

.faq__item + .faq__item { border-top: 1px solid var(--hairline-alpha); }
.faq__titre { margin: 0; }

.faq__bouton {
  appearance: none;
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.faq__bouton:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
  box-shadow: none;
  border-radius: var(--radius-md);
}
.faq__question {
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  line-height: 1.4;
}

.faq__pastille {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-4);
  color: var(--brand-4);
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.faq__pastille svg { transition: transform var(--dur-slow) var(--ease-standard); }
.faq__bouton:hover .faq__pastille { background: var(--action-tint); }
.faq__item--ouvert .faq__pastille {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--on-dark);
}
.faq__item--ouvert .faq__pastille svg { transform: rotate(180deg); }

/* Ouverture : la hauteur passe de 0fr a 1fr (aucune hauteur a mesurer en
   JS, elle suit le texte, quelle que soit sa longueur), pendant que la
   reponse se fond et remonte de quelques pixels. visibility retarde a la
   fermeture : une reponse repliee ne doit ni etre lue par un lecteur
   d'ecran ni recevoir le focus, mais elle doit rester visible pendant
   qu'elle se referme. */
.faq__reponse {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--dur-slow) var(--ease-standard),
              visibility 0s linear var(--dur-slow);
}
.faq__item--ouvert .faq__reponse {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--dur-slow) var(--ease-standard),
              visibility 0s;
}
.faq__reponse-int { min-height: 0; overflow: hidden; }

.faq__texte {
  margin: 0 0 var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--action-tint);
  font-size: var(--text-body-size);
  line-height: 1.6;
  color: var(--ink-muted-80);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-slow) var(--ease-standard);
}
.faq__item--ouvert .faq__texte {
  opacity: 1;
  transform: none;
  transition-delay: 90ms;
}
.faq__texte p { margin: 0 0 var(--space-sm); }
.faq__texte > :last-child { margin-bottom: 0; }
.faq__texte ul { margin: 0 0 var(--space-sm); padding-left: 1.25em; }
.faq__texte li { margin: 0 0 6px; }
.faq__texte li::marker { color: var(--brand-4); }

/* ═════════════════════════ Fenetres ═════════════════════════ */
.cc-modale {
  width: min(520px, 100%);
  max-height: calc(100vh - 2 * var(--space-lg));
  overflow-y: auto;
}

.cc-form { display: flex; flex-direction: column; gap: var(--space-md); }
.cc-form__duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}

.cc-form__alerte {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--signal-critique-tint);
  box-shadow: inset 0 0 0 1px rgba(210,38,79,.22);
  font-size: var(--text-caption-size);
  line-height: 1.45;
  color: var(--signal-critique);
}
.cc-form__alerte svg { flex: 0 0 auto; margin-top: 2px; }
.modale > .modale__panneau > .cc-form__alerte { margin-bottom: var(--space-md); }

.cc-champ { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.cc-champ__label {
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  letter-spacing: var(--text-caption-strong-ls);
  color: var(--ink);
}
.cc-champ__saisie {
  appearance: none;
  width: 100%;
  height: var(--control-height);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--border-input);
  font: inherit;
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-ls);
  color: var(--ink);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
.cc-champ__saisie::placeholder { color: var(--ink-muted-48); }
.cc-champ__saisie:focus,
.cc-champ__saisie:focus-visible {
  outline: none;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px var(--action-focus);
}
.cc-champ__erreur {
  font-size: var(--text-caption-size);
  line-height: 1.4;
  color: var(--signal-critique);
}

/* Champ fautif : le rouge arrive AVEC une secousse. La couleur seule ne
   suffit pas a attirer l'oeil de quelqu'un qui lit lentement (meme regle
   que parcours.css). */
.cc-champ--fautif .cc-champ__saisie,
.cc-champ--fautif .cc-champ__saisie:focus {
  box-shadow: inset 0 0 0 2px var(--signal-critique);
  animation: ccSecousse var(--dur-slow) var(--ease-standard);
}
.cc-champ--fautif .cc-champ__label { color: var(--signal-critique); }
@keyframes ccSecousse {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Menu « Lien avec vous » : meme principe que .menu-champ (parcours.css),
   une liste dessinee par nous plutot que celle, non stylable, d'un
   <select> natif. */
.cc-menu { position: relative; }
.cc-menu__bouton {
  display: flex;
  align-items: center;
  padding-right: 48px;
  text-align: left;
  cursor: pointer;
}
.cc-menu__bouton::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-muted-48);
  border-bottom: 2px solid var(--ink-muted-48);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-standard);
  pointer-events: none;
}
.cc-menu__bouton[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.cc-menu__valeur {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted-48);
}
.cc-menu__bouton--rempli .cc-menu__valeur { color: var(--ink); }

.cc-menu__liste {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-xs) 0;
  list-style: none;
  background: var(--canvas);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 44px -22px rgba(25,20,62,.5), var(--ring-hairline);
  animation: monte var(--dur-fast) var(--ease-standard) both;
}
.cc-menu__liste[hidden] { display: none; }
.cc-menu__liste li {
  padding: 11px 20px;
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-ls);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cc-menu__liste li:hover,
.cc-menu__liste li:focus,
.cc-menu__liste li[aria-selected="true"] {
  background: var(--action-tint);
  color: var(--action-focus);
  outline: none;
}

.cc-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.cc-actions .btn { flex: 1 1 0; }
.modale > .modale__panneau > .cc-actions { margin-top: var(--space-lg); }

/* ═════════════════════ Panneau : ajouter ou modifier ═════════════════════
   Panneau lateral qui glisse depuis la droite, a deux volets --
   « Details » (les informations de la personne) et « Partage » (ce qu'on
   accepte de lui montrer) -- choisis par un commutateur a deux segments.
   La fermeture doit se voir redescendre : js/contacts-confiance.js retire
   --ouvert puis attend la fin de la transition avant de remettre [hidden]. */
.cc-tiroir[hidden] { display: none; }
.cc-tiroir { position: fixed; inset: 0; z-index: 55; }
.cc-tiroir:not(.cc-tiroir--ouvert) { pointer-events: none; }

.cc-tiroir__voile {
  position: absolute;
  inset: 0;
  background: rgba(25,20,62,.46);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
.cc-tiroir--ouvert .cc-tiroir__voile { opacity: 1; }

.cc-tiroir__panneau {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: -30px 0 80px -30px rgba(25,20,62,.5);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.cc-tiroir--ouvert .cc-tiroir__panneau { transform: none; }
.cc-tiroir__panneau:focus { outline: none; }

.cc-tiroir__entete {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.cc-tiroir__identite { min-width: 0; }
.cc-tiroir__titre {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-1);
  overflow-wrap: anywhere;
}
.cc-tiroir__sous-titre {
  margin: 4px 0 0;
  font-size: var(--text-caption-size);
  line-height: 1.4;
  color: var(--ink-muted-80);
}
.cc-tiroir__fermer {
  flex: 0 0 auto;
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-4);
  background: transparent;
  color: var(--brand-4);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cc-tiroir__fermer:hover { background: var(--action-tint); color: var(--brand-1); }
.cc-tiroir__fermer:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
  box-shadow: none;
  border-radius: 50%;
}

/* Commutateur a deux segments (« Details » / « Partage ») : la pastille
   blanche glisse d'un segment a l'autre au lieu d'apparaitre d'un coup. */
.cc-segments {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 var(--space-lg) var(--space-md);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--brand-1);
}
.cc-segments::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.cc-segments[data-actif="partage"]::before { transform: translateX(100%); }
.cc-segment {
  position: relative;
  z-index: 1;
  appearance: none;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--text-body-size);
  font-weight: 600;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard);
}
.cc-segment:hover { color: var(--on-dark); }
.cc-segment[aria-selected="true"] { color: var(--brand-1); }
.cc-segment:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: -4px;
  box-shadow: none;
  border-radius: var(--radius-pill);
}

.cc-tiroir__corps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background: var(--surface-pearl);
}
.cc-tiroir__pied {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline-alpha);
  background: var(--canvas);
}

.cc-tiroir .cc-avis { margin-bottom: var(--space-sm); }
.cc-avis--info { background: var(--action-tint); }
.cc-avis--info svg { color: var(--action-focus); }

.cc-champ__saisie:disabled {
  background: var(--canvas-parchment);
  color: var(--ink-muted-80);
  -webkit-text-fill-color: var(--ink-muted-80);
  cursor: default;
}

.cc-retirer-lien {
  appearance: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  margin-top: var(--space-xs);
  padding: 0 var(--space-xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--ink-muted-80);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cc-retirer-lien:hover { color: var(--brand-1); }
.cc-retirer-lien:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Volet « Partage » ── */
.cc-partage__intro {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-caption-size);
  line-height: 1.55;
  color: var(--ink-muted-80);
}
.cc-partage__intro strong { color: var(--brand-1); }

.cc-partages { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.cc-partage {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--hairline), 0 1px 2px rgba(25,20,62,.04);
}
.cc-partage__tete {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.cc-partage__icone { flex: 0 0 auto; display: grid; place-items: center; color: var(--brand-3); }
.cc-partage__titre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--text-body-strong-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.cc-partage__texte {
  margin: 0;
  padding: var(--space-md);
  border-top: 1px solid var(--hairline-alpha);
  font-size: var(--text-body-size);
  line-height: 1.6;
  color: var(--ink-muted-80);
}

/* Bascule : IDENTIQUE a celle des Reglages (.bascule dans reglages.css) --
   meme piste 46x27, meme bouton rond blanc, violette quand elle est
   active, sans aucun mot (sur demande expresse). Copiee ici parce que
   reglages.css n'est pas charge sur cette page : si l'une change, reporter
   dans l'autre. */
.bascule {
  flex: 0 0 auto;
  display: inline-flex;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.bascule__piste {
  position: relative;
  width: 46px;
  height: 27px;
  border-radius: var(--radius-pill);
  background: #d9d5ea;
  transition: background var(--dur-fast) var(--ease-standard);
}
.bascule[aria-checked="true"] .bascule__piste { background: var(--action); }
.bascule__bouton {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: 0 2px 5px rgba(25, 20, 62, .28);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.bascule[aria-checked="true"] .bascule__bouton { transform: translateX(19px); }
.bascule:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 3px; border-radius: var(--radius-pill); box-shadow: none; }
.bascule:disabled { cursor: not-allowed; opacity: .55; }

.cc-avis a { font-weight: 600; color: var(--action-focus); text-decoration: underline; text-underline-offset: 2px; }

/* ═════════════════════════ Adaptatif ═════════════════════════ */
@media (max-width: 640px) {
  .cc-tiroir__panneau { width: 100%; border-radius: 0; }
  .cc-tiroir__entete { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .cc-tiroir__titre { font-size: 21px; }
  .cc-segments { margin-left: var(--space-md); margin-right: var(--space-md); }
  .cc-tiroir__corps { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .cc-tiroir__pied { padding-left: var(--space-md); padding-right: var(--space-md); }
}
@media (max-width: 720px) {
  /* nowrap : en colonne, « wrap » ferait passer la bande « cercle complet »
     dans une seconde COLONNE, a droite du titre, des que le total depasse la
     hauteur disponible (elle debordait de la fenetre). */
  .cc-entete {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: var(--space-lg) var(--space-md);
  }
  .cc-cercle { flex: 0 0 auto; }
  /* En colonne, la base de 340px du bloc texte deviendrait une HAUTEUR
     (meme piege que .fuites-veille__titre) : un grand vide sous le
     sous-titre. */
  .cc-entete__texte { flex: 0 0 auto; }
  /* Le titre garde la taille commune des bandeaux (24px), sur telephone aussi. */
  .cc-ajouter { width: 100%; justify-content: space-between; padding-left: 22px; text-align: left; }

  /* Ligne compacte : avatar, nom et action sur la premiere ligne, puis le
     detail (lien, e-mail, telephone) sur TOUTE la largeur, sous l'action
     aussi. Dans une colonne etroite a cote de l'action, un e-mail se
     coupait au milieu (« exemple / .fr »). .cc-ligne__corps disparait de la
     mise en page (display: contents) pour que ses enfants entrent
     directement dans la grille. */
  .cc-ligne--place {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    column-gap: var(--space-sm);
    row-gap: 2px;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
  }
  .cc-ligne--place .cc-ligne__corps { display: contents; }
  .cc-ligne--place .cc-avatar { grid-column: 1; grid-row: 1; width: 42px; height: 42px; font-size: var(--text-caption-size); }
  .cc-ligne--place .cc-ligne__nom-ligne,
  .cc-ligne--place .cc-ligne__corps > .cc-ligne__nom { grid-column: 2; grid-row: 1; }
  .cc-ligne--place .cc-action { grid-column: 3; grid-row: 1; padding: 0 var(--space-sm); }
  .cc-ligne--place .cc-ligne__detail { grid-column: 2 / -1; }
  .cc-ligne__meta { display: none; }

  .cc-faq { padding: var(--space-md) var(--space-md) var(--space-xs); }
  .faq__bouton { min-height: 68px; }
  .faq__texte { padding: var(--space-md); }
}
@media (min-width: 721px) {
  .cc-ligne__canal-bas { display: none; }
}
/* Avec la barre laterale (861px et plus), la colonne de contenu ne fait que
   194 a 700px de large jusqu'a 1366px d'ecran (memes marges que la vue
   d'ensemble) : la colonne e-mail/telephone a droite ecrasait alors le nom
   (« Mon fils · 2 elements / partages »). On remet e-mail et telephone
   sous le nom, comme sur telephone. */
@media (min-width: 861px) and (max-width: 1366px) {
  .cc-ligne__meta { display: none; }
  .cc-ligne__canal-bas { display: block; }
}
/* Libelle court du bouton d'ajout sur telephone : « Ajouter un nouveau
   contact » ne tient plus sur une ligne dans la pastille, et coupe sur
   deux lignes centrees. */
.cc-ajouter__court { display: none; }
@media (max-width: 480px) {
  .cc-ajouter__long { display: none; }
  .cc-ajouter__court { display: inline; }
}
@media (max-width: 520px) {
  .cc-modale { padding: var(--space-lg) var(--space-md); }
  .cc-form { gap: var(--space-sm); }
  .cc-actions .btn { padding-left: var(--space-md); padding-right: var(--space-md); }
}
@media (max-width: 359px) {
  .cc-form__duo { grid-template-columns: minmax(0, 1fr); }

  /* A 320px, la colonne du nom est trop etroite a cote du bouton : « confiance »
     se coupait en deux mots (« confianc / e 3 »). Le bouton passe sous le
     texte, qui retrouve toute la largeur. */
  .cc-ligne--place .cc-action {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-ajouter .btn__fleche,
  .cc-avatar,
  .cc-avis,
  .cc-menu__bouton::after { transition: none; }
  .cc-ajouter:hover .btn__fleche,
  .cc-ligne--vide:hover .cc-avatar--vide { transform: none; }
}

/* ── Logo de l'en-tête : deux silhouettes et un cœur ── */
.cc-entete__bloc { display: flex; align-items: center; gap: 16px; }
.cc-logo {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 10px 26px -12px rgba(20, 14, 60, .55);
}
.cc-logo svg { width: 40px; height: 40px; overflow: visible; }
.cc-logo__p1 { animation: cc-logo-g 3.6s ease-in-out infinite; }
.cc-logo__p2 { animation: cc-logo-d 3.6s ease-in-out infinite; }
.cc-logo__coeur { transform-box: fill-box; transform-origin: center; animation: cc-logo-coeur 1.8s ease-in-out infinite; }
@keyframes cc-logo-g { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
@keyframes cc-logo-d { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
@keyframes cc-logo-coeur { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .cc-logo__p1, .cc-logo__p2, .cc-logo__coeur { animation: none; } }
.cc-entete__sous-titre strong { color: #fff; font-weight: 700; }
@media (max-width: 560px) { .cc-logo { width: 52px; height: 52px; } .cc-logo svg { width: 32px; height: 32px; } .cc-entete__bloc { gap: 12px; } }

/* Une phrase d'aide sous un champ (ici : l'e-mail d'information envoyé à la personne de confiance). */
.cc-champ__aide { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-muted-80, #5a5670); }