/* ==========================================================================
   Style C : les formes arrondies, au choix de Mathieu à chaque site (décision du 6 novembre 2026 :
   la question des formes se pose avec le choix de la direction, aux trois niveaux). À lier après
   css/styles.css, seulement quand Mathieu l'a choisi :
     <link rel="stylesheet" href="css/style-c.css">

   La base du gabarit a déjà ses pilules et ses coins ; ce fichier ajoute :
   1. Le socle « bulles », sans ombres (celui que Mathieu a choisi) : la flèche des boutons dans un rond
      plein, les icônes dans des ronds pleins, questions et listes en bulles (la bulle choisie peut se
      remplir), cartes, photos et panneaux arrondis.
   2. Le supplément « ombres », seulement pour une direction douce et haut de gamme, avec
      <html data-style-c="ombres"> : dégradés du héros et du contact, ombres douces, cadre double.
      high-end-visual-design guide alors le reste des surfaces.

   Ronds : --rond (fond des ronds hors des boutons, la couleur du site par défaut) et --sur-rond (l'icône
   dedans). Dans un bouton plein, le rond prend la couleur du texte du bouton et l'icône celle de son
   fond ; --rond-bouton et --sur-rond-bouton changent ce choix. Mesurer chaque paire : l'icône contre
   son rond, 3:1 au moins ; le texte d'une bulle remplie, 4,5:1.

   Balisage :
     Icône dans un rond  : <i class="ph ph-phone rond" aria-hidden="true"></i> (les icônes de .direct
                           et le bouton d'appel mobile sont déjà ronds)
     Questions en bulles : <div class="bulles"><details class="bulle"><summary><h3>La question ?</h3>
                           <i class="ph ph-caret-down rond" aria-hidden="true"></i></summary><p>La réponse.</p>
                           </details></div>
     Liste dont un choix se remplit : <li class="bulle bulle--remplie is-open">, is-open posée par le
                           script de la pièce (jamais par la classe .js, absente en mouvement réduit)
     Carte : <div class="carte"> ; photo : <img class="arrondie"> ; section : <section class="panneau">

   La fiche note "style": "C" : controle.py laisse alors passer contours, ombres, dégradés et effets de
   bouton (STYLE_C). Chaque ligne que lint.mjs refuserait porte « taste-skill-ignore : style C choisi ».
   ========================================================================== */

/* ==========================================================================
   1. Le socle « bulles »
   ========================================================================== */

:root { --rond: var(--brand); --sur-rond: var(--btn-fg); }

/* La flèche des boutons dans un rond plein */
.btn--primary .btn__icon { background: var(--rond-bouton, var(--btn-fg)); color: var(--sur-rond-bouton, var(--btn-bg)); }
.btn--ghost .btn__icon { background: var(--rond); color: var(--sur-rond); }
.btn--light .btn__icon { background: var(--deep); color: var(--on-green); }

/* Icônes dans des ronds pleins */
.rond, .direct a i {
  flex: none; display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--rond); color: var(--sur-rond);
}
.mobile-cta__call { border-radius: 50%; background: var(--rond); color: var(--sur-rond); }
.form__success-icon { background: var(--rond); color: var(--sur-rond); }

/* Bulles : questions qui se déplient, ou lignes d'une liste */
.bulles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; align-items: start; }
@media (max-width: 800px) { .bulles { grid-template-columns: minmax(0, 1fr); } }
.bulle {
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong);   /* taste-skill-ignore : style C choisi */
  transition: background var(--t-base) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .bulle:not([open]):not(.is-open):hover { border-color: var(--ink-3); } }
.bulle > summary {
  min-height: 56px; padding: 1rem 1.15rem; border-radius: calc(var(--r-md) - 1px);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer; list-style: none;
}
.bulle > summary::-webkit-details-marker { display: none; }
.bulle > summary > :is(h2, h3, h4) { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.bulle > summary .rond { width: 2.1rem; height: 2.1rem; transition: transform var(--t-base) var(--ease-soft); }
.bulle[open] > summary .rond { transform: rotate(180deg); }
.bulle > :not(summary) { padding-inline: 1.15rem; }
.bulle > :last-child:not(summary) { padding-bottom: 1.1rem; }
.bulle[open] > :not(summary) { animation: rise-in var(--t-base) var(--ease); }
/* La bulle choisie se remplit de la couleur des ronds, avec l'encre des ronds */
.bulle--remplie[open], .bulle--remplie.is-open { background: var(--rond); border-color: var(--rond); color: var(--sur-rond); }
.bulle--remplie[open] .rond, .bulle--remplie.is-open .rond { background: var(--sur-rond); color: var(--rond); }
.bulle--remplie[open] :focus-visible, .bulle--remplie.is-open :focus-visible { outline-color: var(--sur-rond); }

/* Cartes, photos et panneaux arrondis */
.carte { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); }
.arrondie, img.arrondie { border-radius: var(--r-lg); overflow: hidden; }
.panneau { margin-inline: 12px; border-radius: clamp(24px, 4vw, 48px); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .bulle, .bulle > summary .rond { transition: none; }
  .bulle[open] > :not(summary) { animation: none; }
}

/* ==========================================================================
   2. Le supplément « ombres » : <html data-style-c="ombres">
   ========================================================================== */

[data-style-c~="ombres"] .hero { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }   /* taste-skill-ignore : style C choisi */

[data-style-c~="ombres"] .btn--primary { box-shadow: 0 14px 30px -18px rgba(var(--shadow-rgb), .5); }   /* taste-skill-ignore : style C choisi */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { [data-style-c~="ombres"] .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); } }
@media (prefers-color-scheme: dark) {
  [data-style-c~="ombres"] .btn--primary { box-shadow: none; }   /* taste-skill-ignore : style C choisi */
}

/* Cadre à double bordure : une coque légère avec un filet d'un pixel, puis un cœur au rayon plus petit */
[data-style-c~="ombres"] .frame {
  padding: 8px; border-radius: var(--r-lg); overflow: visible; background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(var(--shadow-rgb), .4);   /* taste-skill-ignore : style C choisi */
}
[data-style-c~="ombres"] .frame__inner {
  border-radius: calc(var(--r-lg) - 8px); background: var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);   /* taste-skill-ignore : style C choisi */
}

[data-style-c~="ombres"] .work__pic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -40px rgba(0, 0, 0, .6); }   /* taste-skill-ignore : style C choisi */

[data-style-c~="ombres"] .contact {
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%);   /* taste-skill-ignore : style C choisi */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);   /* taste-skill-ignore : style C choisi */
}

/* Carte du formulaire à double bordure */
[data-style-c~="ombres"] .card { padding: 8px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }   /* taste-skill-ignore : style C choisi */
[data-style-c~="ombres"] .card__inner {
  border-radius: calc(var(--r-lg) - 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);   /* taste-skill-ignore : style C choisi */
}
@media (prefers-color-scheme: dark) { [data-style-c~="ombres"] .card__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } }   /* taste-skill-ignore : style C choisi */
@media (max-width: 600px) {
  [data-style-c~="ombres"] .card { padding: 6px; }
  [data-style-c~="ombres"] .card__inner { border-radius: calc(var(--r-lg) - 6px); }
}