/* Page d'accueil — Atelier des Cartes. Même vocabulaire graphique que le
   calculateur : noir et blanc, capitales espacées, un seul accent tricolore. */

/* Le titre de page du thème ferait doublon avec l'accroche. */
body.ccc-page-accueil .entry-header,
body.ccc-page-accueil .page-title{display:none;}

.acc{max-width:1060px;font-size:16px;line-height:1.55;}
/* :where() met ces règles de base à spécificité nulle : toute règle de classe
   ci-dessous l'emporte sans avoir à surenchérir. */
.acc :where(h1,h2,h3){margin:0;font-weight:700;letter-spacing:-.01em;}
.acc :where(p){margin:0 0 14px;}
.acc-surtitre{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ccc-muted);font-weight:700;margin-bottom:10px;}
.acc-h2{font-size:30px;line-height:1.15;margin-bottom:26px;}
.acc-h3{font-size:17px;margin-bottom:10px;}
.acc-dessin{width:100%;height:auto;max-width:96px;color:var(--ccc-fg);}

/* Boutons */
.acc-btn{display:inline-block;padding:15px 30px;background:var(--ccc-fg);color:var(--ccc-bg);
  font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:1.5px solid var(--ccc-fg);transition:background .15s,color .15s;}
.acc-btn:hover{background:transparent;color:var(--ccc-fg);}
.acc-btn--sec{background:transparent;color:var(--ccc-fg);text-transform:none;letter-spacing:.01em;}
.acc-btn--sec:hover{background:var(--ccc-fg);color:var(--ccc-bg);}
.acc-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;}
.acc-lien{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ccc-fg);text-decoration:none;border-bottom:1.5px solid var(--ccc-fg);padding-bottom:2px;}
.acc-lien:hover{opacity:.6;}

/* Accroche */
.acc-hero{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:center;
  padding:10px 0 54px;border-bottom:1px solid var(--ccc-line);}
.acc-marque{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--ccc-muted);margin-bottom:16px;}
.acc-titre{font-size:46px;line-height:1.05;margin-bottom:20px;}
.acc-chapeau{font-size:18px;line-height:1.5;color:#444;max-width:34em;margin:22px 0 0;}
.acc-hero__image{display:block;}
.acc-hero__image .acc-dessin{max-width:100%;stroke-width:2;}

/* Arguments */
.acc-args{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:46px 0;
  border-bottom:1px solid var(--ccc-line);}
.acc-arg h2{font-size:17px;margin:12px 0 8px;}
.acc-arg p{font-size:15px;color:#444;margin:0;}
.acc-france__drapeau{display:block;width:30px;height:20px;border:1px solid var(--ccc-line);
  background:linear-gradient(to right,#0055A4 0 33.34%,#fff 33.34% 66.67%,#EF4135 66.67% 100%);}

/* Sections */
.acc-section{padding:54px 0;border-bottom:1px solid var(--ccc-line);}
.acc-section--sombre{background:var(--ccc-fg);color:#fff;padding:54px 34px;border:0;margin:54px 0;}
.acc-section--sombre .acc-surtitre,.acc-section--sombre p{color:rgba(255,255,255,.72);}
/* Les titres héritent de la couleur sombre du thème : illisibles sur fond noir. */
.acc-section--sombre .acc-h2,.acc-section--sombre .acc-h3,
.acc-section--sombre h2,.acc-section--sombre h3{color:#fff;}
.acc-section--sombre .acc-dessin{color:#fff;}
/* Sur fond noir, un lien coloré devient illisible : blanc et souligné. */
.acc-section--sombre p a:not(.acc-btn):not(.acc-lien){color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .15s ease;}
.acc-section--sombre p a:not(.acc-btn):not(.acc-lien):hover,
.acc-section--sombre p a:not(.acc-btn):not(.acc-lien):focus{border-bottom-color:#fff;}

/* Étapes */
.acc-etapes{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;list-style:none;margin:0;padding:0;
  counter-reset:etape;}
.acc-etapes li{counter-increment:etape;}
.acc-etapes li::before{content:counter(etape,decimal-leading-zero);display:block;font-size:11px;
  letter-spacing:.14em;font-weight:700;color:var(--ccc-muted);margin-bottom:12px;}
.acc-etapes .acc-dessin{max-width:56px;margin-bottom:12px;}
.acc-etapes h3{font-size:15px;margin-bottom:8px;}
.acc-etapes p{font-size:14px;color:#555;margin:0;}

/* Types de jeux */
.acc-jeux{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ccc-line);
  border:1px solid var(--ccc-line);}
.acc-jeu{background:var(--ccc-bg);padding:30px 26px;display:flex;flex-direction:column;align-items:flex-start;}
.acc-jeu__image{margin-bottom:16px;}
.acc-jeu__titre{font-size:18px;margin-bottom:6px;}
.acc-jeu__accroche{font-size:14px;font-style:italic;color:var(--ccc-muted);margin-bottom:10px;}
.acc-jeu__texte{font-size:15px;color:#444;flex:1;}
/* Variante à quatre colonnes. Sur la page oracle, les quatre formats
   tenaient sur une grille de trois : le quatrième se retrouvait seul sur
   une rangée, avec deux tiers de vide gris à sa droite. Quatre colonnes,
   un peu moins de marge intérieure, et la rangée est pleine. Les écrans
   étroits repassent à deux puis une colonne par les règles plus bas. */
.acc-jeux--quatre{grid-template-columns:repeat(4,1fr);}
.acc-jeux--quatre .acc-jeu{padding:26px 20px;}
.acc-jeux--quatre .acc-jeu__texte{font-size:14px;}
/* Précision sous une grille : plus discrète que le corps de texte, mais
   lisible — ce n'est pas une mention légale. */
.acc-note{font-size:15px;color:#666;max-width:44em;margin:22px 0 0;}

/* Bandeau de la page oracle. Le recadrage se fait ici : l'image reste au
   16/9, la bande est plus basse, et le cadrage descend un peu pour garder
   les mains et les cartes au centre plutôt que les bougies du haut. */
/* Le calculateur de la page oracle : illustration à gauche, formulaire à
   droite, comme sur la page des cartes. */
/* Le contenu de la page est calé à 1060 px, trop étroit pour un
   formulaire à deux colonnes : la section du devis sort de cette limite
   et retrouve la largeur de la page des cartes. Centrage par marge et non
   par transform, qui casserait le collant de la colonne de gauche. */
.or-devis{width:min(1290px, calc(100vw - 40px));
 margin-left:calc(50% - min(1290px, calc(100vw - 40px)) / 2);}
/* 458 px : la largeur exacte de l'illustration sur la page des cartes,
   pour que les deux calculateurs se ressemblent. */
.or-colonnes{display:grid;grid-template-columns:minmax(0,458px) minmax(0,1fr);
 gap:40px;align-items:start;}
/* Pas de « collant » ici : le script descend le second cadre en face de
   l'étape conditionnement, et une colonne collante plus haute que l'écran
   emporterait cette photo avec elle au défilement. La colonne suit donc le
   flux, comme sur la page des cartes. */
/* Le titre ouvre la colonne du formulaire : pas de marge haute, pour qu'il
   s'aligne sur le haut de l'illustration d'en face. */
.or-colonnes__form>.acc-surtitre{display:block;margin-top:0;}
.or-devis__titre{margin-top:6px;margin-bottom:22px;}
.or-visuels{position:static;}
.or-visuel{margin:0;}
.or-visuel img{display:block;width:100%;height:auto;border-radius:3px;}
.or-visuel figcaption{margin-top:8px;font-size:13px;text-align:center;color:#8a8a8a;}
/* Le second cadre, ajouté par le script sous le premier. */
.or-visuels .ccc-visuel-pack{margin-top:18px;}
.or-colonnes__form{min-width:0;}
@media (max-width:900px){
 .or-colonnes{grid-template-columns:1fr;gap:24px;}
 .or-visuels{position:static;max-width:420px;margin:0 auto;}
}

.or-hero{margin:0;border-radius:3px;overflow:hidden;background:#ddd9d1;}
.or-hero__image{display:block;width:100%;height:auto;
 aspect-ratio:5/2;object-fit:cover;object-position:center 46%;}
/* La deuxième vue et les suivantes sont superposées à la première : elles
   prennent la hauteur du cadre, l'aspect-ratio ne les concerne plus. */
.acc-hero__photo--carrousel .or-hero__image + .or-hero__image{aspect-ratio:auto;}
@media (max-width:900px){
 .or-hero__image{aspect-ratio:16/10;}
}

/* Personnalisations */
.acc-perso{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.acc-perso h3{font-size:18px;margin:14px 0 10px;}
.acc-perso p{font-size:15px;color:#444;margin:0;}

/* Atelier */
.acc-deux{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;}
.acc-liste{margin:0;padding:0;list-style:none;font-size:15px;}
.acc-liste li{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.18);}
.acc-liste li:last-child{border-bottom:0;}

/* Final */
.acc-final{padding:16px 0 60px;text-align:center;}
.acc-final .acc-h2{margin-bottom:14px;}
.acc-final p{max-width:44em;margin-left:auto;margin-right:auto;color:#444;}
.acc-final .acc-actions{justify-content:center;}
.acc-tel{font-size:20px;font-weight:700;margin-top:18px;color:var(--ccc-fg);}
.acc-signature{margin-top:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ccc-muted);}

/* Écrans étroits */
@media (max-width:980px){
  .acc-hero{grid-template-columns:1fr;gap:26px;}
  .acc-hero__image{max-width:220px;}
  .acc-titre{font-size:36px;}
  .acc-args{grid-template-columns:1fr;gap:26px;}
  .acc-etapes{grid-template-columns:repeat(2,1fr);}
  .acc-jeux,.acc-perso{grid-template-columns:repeat(2,1fr);}
  .acc-deux{grid-template-columns:1fr;gap:26px;}
}
@media (max-width:620px){
  .acc-titre{font-size:29px;}
  .acc-h2{font-size:24px;}
  .acc-etapes,.acc-jeux,.acc-perso{grid-template-columns:1fr;}
  .acc-section--sombre{padding:40px 20px;}
  .acc-btn{display:block;text-align:center;}
}

/* Engagements — liste sur fond clair */
.acc-liste--claire li{border-bottom:1px solid var(--ccc-line);}
.acc-eco .acc-liste li{color:var(--ccc-fg);font-weight:600;}

/* Barre légale de pied de page (le thème laisse le pied vide) */
.ccc-pied{border-top:1px solid #dcdcdc;background:#fff;padding:26px 20px;margin-top:40px;}
.ccc-pied__inner{max-width:1060px;margin:0 auto;text-align:center;}
.ccc-pied__liens{margin:0;font-size:13px;letter-spacing:.02em;}
.ccc-pied__liens a{color:#111;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.25);}
.ccc-pied__liens a:hover{border-bottom-color:#111;}
.ccc-pied__liens span{color:#8a8a8a;margin:0 6px;}
.ccc-pied__identite{margin:10px 0 0;font-size:12px;color:#8a8a8a;}

/* Accroche avec photo : le texte au-dessus, l'image en pleine largeur */
.acc-hero--photo{grid-template-columns:1fr;gap:34px;}
.acc-hero__photo{margin:0;width:100%;}
.acc-hero__photo img{display:block;width:100%;height:auto;border-radius:3px;}

/* Carrousel de l'accroche : la première photo reste dans le flux et donne
   sa hauteur au cadre ; les suivantes se superposent et se croisent en fondu.
   Sans JavaScript, on voit la première photo — le cas normal avant. */
.acc-hero__photo--carrousel{position:relative;}
.acc-hero__photo--carrousel .acc-hero__vue{transition:opacity .6s ease;}
.acc-hero__photo--carrousel .acc-hero__vue + .acc-hero__vue{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.acc-hero__photo--carrousel .acc-hero__vue.est-active{opacity:1;}
.acc-hero__photo--carrousel .acc-hero__vue:not(.est-active){opacity:0;}

/* Voile discret en bas : les pastilles restent lisibles sur une photo claire. */
.acc-hero__photo--carrousel::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:76px;border-radius:0 0 3px 3px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.30));}

.acc-hero__pastilles{position:absolute;left:0;right:0;bottom:14px;z-index:1;
  display:flex;justify-content:center;gap:10px;}
.acc-hero__pastille{width:30px;height:30px;padding:0;border:0;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;}
.acc-hero__pastille::before{content:"";width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.25);
  transition:background-color .25s,transform .25s;}
.acc-hero__pastille:hover::before{background:rgba(255,255,255,.85);}
.acc-hero__pastille.est-active::before{background:#fff;transform:scale(1.25);}
.acc-hero__pastille:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:50%;}

@media (prefers-reduced-motion: reduce){
  .acc-hero__photo--carrousel .acc-hero__vue{transition:none;}
}
@media (min-width:981px){
  .acc-hero--photo .acc-hero__texte{max-width:46em;}
}

/* Normes et certifications */
.acc-normes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--ccc-line);border:1px solid var(--ccc-line);}
.acc-norme{background:var(--ccc-bg);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;}
.acc-norme__titre{font-size:15px;letter-spacing:.04em;text-transform:uppercase;}
.acc-norme__texte{font-size:14px;line-height:1.5;color:#444;}
.acc-norme__note{margin-top:auto;padding-top:6px;font-size:12px;letter-spacing:.04em;color:var(--ccc-muted);}
@media (max-width:980px){ .acc-normes{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .acc-normes{grid-template-columns:1fr;} }

/* Page « Nos jeux » */
.nj-intro{padding:0 0 30px;}
.nj-intro .acc-chapeau{margin-top:6px;}
.nj-phares{display:grid;gap:26px;padding-bottom:40px;border-bottom:1px solid var(--ccc-line);}
.nj-carte{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center;
  border:1px solid var(--ccc-line);background:var(--ccc-bg);padding:26px;}
.nj-carte:nth-child(even){grid-template-columns:1fr 260px;}
.nj-carte:nth-child(even) .nj-carte__visuel{order:2;}
.nj-carte__visuel{display:flex;align-items:center;justify-content:center;min-height:200px;
  background:rgba(0,0,0,.03);text-decoration:none;color:var(--ccc-fg);}
.nj-carte__visuel .acc-dessin{max-width:130px;}
.nj-photo{display:block;width:100%;height:100%;object-fit:cover;min-height:200px;}
.nj-carte__titre{font-size:24px;margin:0 0 6px;}
.nj-carte__texte{font-size:15px;color:#444;margin:0 0 12px;}
.nj-specs{list-style:none;margin:0 0 18px;padding:0;font-size:13px;letter-spacing:.02em;}
.nj-specs li{padding:6px 0;border-bottom:1px solid var(--ccc-line);}
.nj-specs li:first-child{font-weight:700;}
.nj-carte__actions{display:flex;flex-wrap:wrap;gap:10px;margin:0;}
.nj-carte__actions .acc-btn{padding:12px 22px;font-size:13px;}
.nj-bandeau__grille{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;}
.nj-bandeau .acc-h2{color:#fff;}
.nj-btn-clair{background:#fff;color:var(--ccc-fg);border-color:#fff;}
.nj-btn-clair:hover{background:transparent;color:#fff;}
.nj-btn-contour{color:#fff;border-color:rgba(255,255,255,.6);}
.nj-btn-contour:hover{background:#fff;color:var(--ccc-fg);}
@media (max-width:860px){
  .nj-carte,.nj-carte:nth-child(even){grid-template-columns:1fr;gap:20px;}
  .nj-carte:nth-child(even) .nj-carte__visuel{order:0;}
  .nj-bandeau__grille{grid-template-columns:1fr;gap:26px;}
}

/* ---------- FAQ [faq_cartes] ---------- */
.faq-sommaire{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.faq-sommaire a{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ccc-fg);text-decoration:none;border:1.5px solid var(--ccc-line);padding:8px 14px;}
.faq-sommaire a:hover{border-color:var(--ccc-fg);}
.faq-rubrique{padding:10px 0 34px;scroll-margin-top:90px;}
.faq-rubrique__titre{font-size:22px;margin:0 0 10px;padding-bottom:10px;border-bottom:2px solid var(--ccc-fg);}
.faq-q{border-bottom:1px solid var(--ccc-line);scroll-margin-top:90px;}
.faq-q summary{cursor:pointer;list-style:none;position:relative;padding:17px 44px 17px 0;
  font-weight:700;font-size:16px;line-height:1.35;}
.faq-q summary::-webkit-details-marker{display:none;}
.faq-q summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:400;line-height:1;transition:transform .2s;}
.faq-q[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-q summary:hover{opacity:.7;}
.faq-q summary:focus-visible{outline:2px solid var(--ccc-fg);outline-offset:2px;}
.faq-r{padding:0 0 18px;font-size:15px;color:#444;max-width:760px;}
.faq-r ul{margin:0 0 12px;padding-left:20px;}
.faq-r li{margin:4px 0;}
.faq-r a{color:var(--ccc-fg);text-decoration:underline;text-underline-offset:2px;}
.faq .nj-bandeau{margin-top:20px;}
.faq .nj-bandeau__grille{grid-template-columns:1fr;}

/* Renvoi vers les plateaux de jeu, sur l'accueil. */
.acc-plateaux{max-width:760px;}
.acc-plateaux .acc-actions{margin-top:18px;}

/* ---------------------------------------------------------------------
   Accroche : les cartes se posent sur la photo, une fois par visite.
   La photo reste affichée en dessous : l'animation ne retarde rien.
   --------------------------------------------------------------------- */
.acc-hero--anim{position:relative;}
.acc-anim{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;
  transition:opacity .62s ease-out;}
.acc-anim--fin{opacity:0;}
.acc-anim__carte{position:absolute;background:#fff;border:1px solid #d9d9d9;border-radius:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;
  line-height:1;will-change:transform;
  transform:translateY(var(--h)) rotate(calc(var(--r) - 80deg));opacity:0;
  animation:acc-poser .85s cubic-bezier(.22,.9,.24,1) var(--d) both;}
.acc-anim__coin{position:absolute;top:6%;left:7%;font-weight:700;line-height:1.05;text-align:center;}
.acc-anim__coin i{display:block;font-style:normal;}
.acc-anim__carte--rouge{color:#c0271c;}
.acc-anim__carte--noir{color:#1a1a1a;}
@keyframes acc-poser{
  0%  {transform:translateY(var(--h)) rotate(calc(var(--r) - 80deg));opacity:0;}
  14% {opacity:1;}
  72% {transform:translateY(12px) rotate(calc(var(--r) + 3deg));opacity:1;}
  100%{transform:translateY(0) rotate(var(--r));opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .acc-anim{display:none;}
}

/*
 * Section de l'éditeur en ligne.
 *
 * La capture passe devant le texte en largeur : une copie d'écran
 * d'interface rétrécie ne montre plus rien, et c'est elle qui prouve ce
 * que le paragraphe affirme.
 */
.acc-editeur .acc-deux{grid-template-columns:1fr 1.3fr;align-items:start;}
.acc-editeur__vue{margin:0;border:1px solid var(--ccc-line);background:#f6f6f6;}
.acc-editeur__vue img{display:block;width:100%;height:auto;}

@media (max-width:860px){
  .acc-editeur .acc-deux{grid-template-columns:1fr;}
}