/* =============================================================
   COMARQUAGE SERVICE-PUBLIC.FR — CSS complet v1.0
   Reproduit fidèlement le rendu visible sur service-public.fr
   Palette : blanc / orange #E05206 / gris #555
   RGAA 4.1 compatible
   ============================================================= */

/* ----- VARIABLES ------------------------------------------- */
:root {
    --sp-orange:        #E05206;
    --sp-orange-light:  #F5F0EB;
    --sp-orange-dark:   #C04400;
    --sp-blue:          #003189;
    --sp-text:          #1A1A1A;
    --sp-text-muted:    #555555;
    --sp-border:        #DDDDDD;
    --sp-bg-light:      #F5F5F5;
    --sp-bg-notice-att: #FDF2F2;
    --sp-bg-notice-note:#FEF8EC;
    --sp-radius:        2px;
    --sp-font:          'Marianne', Arial, sans-serif;
    --sp-max-width:     860px;
}

/* ----- CONTENEUR PRINCIPAL --------------------------------- */
.comarquage-fiche {
    font-family:    var(--sp-font);
    font-size:      16px;
    line-height:    1.6;
    color:          var(--sp-text);
    max-width:      var(--sp-max-width);
    margin:         0 auto;
    padding:        2rem 1rem;
}

/* ----- EN-TÊTE FICHE --------------------------------------- */
.comarquage-fiche__header {
    border-bottom: 3px solid var(--sp-orange);
    padding-bottom: 1rem;
    margin-bottom:  1.25rem;
}

.comarquage-fiche__title {
    font-size:    1.625rem;    /* 26px */
    font-weight:  700;
    color:        var(--sp-text);
    margin:       0 0 .5rem;
    line-height:  1.25;
}

/* "Vérifié le XX/XX/XXXX – Direction..." */
.comarquage-fiche__verified {
    font-size:  .8125rem;      /* 13px */
    color:      var(--sp-text-muted);
    margin:     0;
    line-height: 1.4;
}

/* ----- INTRODUCTION ---------------------------------------- */
.comarquage-fiche__intro {
    margin-bottom: 1.5rem;
}

.comarquage-fiche__intro p {
    margin: 0 0 .75rem;
}

/* Mise en évidence → <strong class="comarquage-emphasis"> */
.comarquage-emphasis {
    font-weight: 700;
    color: inherit;
}

/* ----- ONGLETS (Situations) -------------------------------- */
.comarquage-tabs {
    display:        flex;
    flex-wrap:      wrap;
    gap:            0;
    border-bottom:  2px solid var(--sp-border);
    margin-bottom:  1.25rem;
}

.comarquage-tabs__btn {
    padding:          .625rem 1.125rem;
    font-size:        .9375rem;
    font-family:      var(--sp-font);
    font-weight:      400;
    color:            var(--sp-text);
    background:       var(--sp-bg-light);
    border:           1px solid var(--sp-border);
    border-bottom:    none;
    cursor:           pointer;
    border-radius:    var(--sp-radius) var(--sp-radius) 0 0;
    margin-right:     4px;
    margin-bottom:    -2px;
    transition:       background .15s ease, color .15s ease;
    position:         relative;
}

.comarquage-tabs__btn:hover {
    background: #EBEBEB;
}

.comarquage-tabs__btn.is-active {
    background:  var(--sp-orange);
    color:       #fff;
    border-color:var(--sp-orange);
    font-weight: 600;
    z-index:     1;
}

.comarquage-tabs__btn:focus-visible {
    outline:        3px solid var(--sp-blue);
    outline-offset: 2px;
    z-index:        2;
}

/* ----- PANNEAU (contenu de l'onglet actif) ----------------- */
.comarquage-panel {
    display: none;
}

.comarquage-panel.is-active {
    display: block;
}

/* ----- CONTRÔLES TOUT REPLIER / TOUT DÉPLIER -------------- */
.comarquage-accordion-controls {
    display:         flex;
    justify-content: flex-end;
    gap:             1rem;
    margin-bottom:   .75rem;
}

.comarquage-accordion-controls__btn {
    display:      inline-flex;
    align-items:  center;
    gap:          .3rem;
    font-size:    .875rem;
    color:        var(--sp-text-muted);
    background:   none;
    border:       none;
    cursor:       pointer;
    font-family:  var(--sp-font);
    padding:      0;
    transition:   color .15s;
}

.comarquage-accordion-controls__btn:hover {
    color: var(--sp-orange);
}

.comarquage-accordion-controls__btn:focus-visible {
    outline:        3px solid var(--sp-blue);
    outline-offset: 2px;
}

.comarquage-icon {
    font-size:   1rem;
    line-height: 1;
}

/* ----- ACCORDÉON ------------------------------------------- */
.comarquage-accordion {
    border:     1px solid var(--sp-border);
    border-bottom: none;
}

.comarquage-accordion__item {
    border-bottom: 1px solid var(--sp-border);
}

/* Bouton déclencheur de l'accordéon */
.comarquage-accordion__trigger {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           100%;
    padding:         .875rem 1rem;
    font-size:       1rem;
    font-family:     var(--sp-font);
    font-weight:     400;
    color:           var(--sp-text);
    background:      #fff;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    transition:      background .15s, color .15s;
}

.comarquage-accordion__trigger:hover {
    background: var(--sp-bg-light);
    color:      var(--sp-orange-dark);
}

.comarquage-accordion__trigger[aria-expanded="true"] {
    font-weight: 600;
    color:       var(--sp-text);
    background:  #fff;
}

.comarquage-accordion__trigger:focus-visible {
    outline:        3px solid var(--sp-blue);
    outline-offset: -3px;
    z-index:        1;
    position:       relative;
}

/* Chevron animé */
.comarquage-accordion__icon {
    display:      inline-block;
    width:        20px;
    height:       20px;
    flex-shrink:  0;
    position:     relative;
}

.comarquage-accordion__icon::before,
.comarquage-accordion__icon::after {
    content:    '';
    position:   absolute;
    top:        50%;
    width:      8px;
    height:     2px;
    background: var(--sp-orange);
    border-radius: 1px;
    transition: transform .2s ease;
}

.comarquage-accordion__icon::before {
    left: 3px;
    transform: translateY(-50%) rotate(45deg);
}

.comarquage-accordion__icon::after {
    right: 3px;
    transform: translateY(-50%) rotate(-45deg);
}

/* Rotation quand ouvert */
.comarquage-accordion__trigger[aria-expanded="true"] .comarquage-accordion__icon::before {
    transform: translateY(-50%) rotate(-45deg);
}

.comarquage-accordion__trigger[aria-expanded="true"] .comarquage-accordion__icon::after {
    transform: translateY(-50%) rotate(45deg);
}

/* Contenu de l'accordéon */
.comarquage-accordion__content {
    padding:    1rem 1.25rem 1.25rem;
    background: #fff;
    border-top: 1px solid var(--sp-border);
}

.comarquage-accordion__content[hidden] {
    display: none;
}

/* ----- TYPOGRAPHIE DANS LES FICHES ------------------------- */
.comarquage-accordion__content p,
.comarquage-fiche__intro p {
    margin: 0 0 .75rem;
}

.comarquage-accordion__content p:last-child {
    margin-bottom: 0;
}

.comarquage__section-title {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--sp-text);
    margin:        1rem 0 .5rem;
    border-left:   3px solid var(--sp-orange);
    padding-left:  .6rem;
}

/* ----- LISTES ---------------------------------------------- */
.comarquage-list {
    margin:       .5rem 0 .75rem 1.25rem;
    padding:      0;
}

.comarquage-list li {
    margin-bottom: .35rem;
}

.comarquage-list li::marker {
    color: var(--sp-orange);
}

/* ----- TABLEAUX -------------------------------------------- */
.comarquage-table-wrapper {
    overflow-x:    auto;
    margin:        1rem 0;
    border-radius: var(--sp-radius);
    border:        1px solid var(--sp-border);
}

.comarquage-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9375rem;
}

.comarquage-table th,
.comarquage-table td {
    padding:       .5rem .75rem;
    border:        1px solid var(--sp-border);
    text-align:    left;
    vertical-align: top;
}

.comarquage-table th {
    background:  var(--sp-bg-light);
    font-weight: 600;
}

.comarquage-table tr:nth-child(even) td {
    background: #FAFAFA;
}

/* ----- NOTICES (Attention / À noter) ----------------------- */
.comarquage-notice {
    margin:        1rem 0;
    padding:       .75rem 1rem;
    border-left:   4px solid;
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    font-size:     .9375rem;
}

.comarquage-notice--attention {
    border-color: #C0392B;
    background:   var(--sp-bg-notice-att);
    color:        #6B1A14;
}

.comarquage-notice--attention strong {
    color: #C0392B;
}

.comarquage-notice--anoter {
    border-color: #D4A017;
    background:   var(--sp-bg-notice-note);
    color:        #5C4100;
}

.comarquage-notice--anoter strong {
    color: #A07800;
}

/* ----- BLOCS CAS (conditionnel) ---------------------------- */
.comarquage__bloccas {
    background:  var(--sp-orange-light);
    border-left: 4px solid var(--sp-orange);
    padding:     .75rem 1rem;
    margin:      .75rem 0;
}

.comarquage__bloccas-title {
    font-size:   .9375rem;
    font-weight: 700;
    margin:      0 0 .4rem;
    color:       var(--sp-orange-dark);
}

/* ----- BOUTONS TÉLÉSERVICE --------------------------------- */
.comarquage-btn {
    display:         inline-block;
    padding:         .5rem 1.25rem;
    background:      var(--sp-orange);
    color:           #fff;
    font-family:     var(--sp-font);
    font-size:       .9375rem;
    font-weight:     600;
    text-decoration: none;
    border-radius:   var(--sp-radius);
    transition:      background .15s;
    margin:          .5rem 0;
}

.comarquage-btn:hover {
    background:      var(--sp-orange-dark);
    color:           #fff;
    text-decoration: none;
}

.comarquage-btn:focus-visible {
    outline:        3px solid var(--sp-blue);
    outline-offset: 2px;
}

/* ----- OÙ S'ADRESSER -------------------------------------- */
.comarquage-adresses {
    margin-top:    2rem;
    padding-top:   1.25rem;
    border-top:    2px solid var(--sp-border);
}

.comarquage-adresses h2 {
    font-size:     1.125rem;
    font-weight:   700;
    margin-bottom: .75rem;
}

.comarquage-adresses__item {
    background:    var(--sp-bg-light);
    border:        1px solid var(--sp-border);
    padding:       .75rem 1rem;
    margin-bottom: .5rem;
    border-radius: var(--sp-radius);
}

.comarquage-adresses__item h3 {
    font-size:   1rem;
    font-weight: 600;
    margin:      0 0 .35rem;
}

/* ----- SOURCE (lien canonique) ----------------------------- */
.comarquage-fiche__source {
    margin-top:  2rem;
    font-size:   .8125rem;
    color:       var(--sp-text-muted);
}

.comarquage-fiche__source a {
    color:           var(--sp-blue);
    text-decoration: underline;
}

.comarquage-fiche__source a:hover {
    color: var(--sp-orange);
}

/* ----- LIENS DANS LE CONTENU ------------------------------ */
.comarquage-accordion__content a,
.comarquage-fiche__intro a {
    color:           var(--sp-blue);
    text-decoration: underline;
}

.comarquage-accordion__content a:hover,
.comarquage-fiche__intro a:hover {
    color: var(--sp-orange);
}

/* ----- RESPONSIVE ----------------------------------------- */
@media (max-width: 600px) {
    .comarquage-fiche__title {
        font-size: 1.375rem;
    }

    .comarquage-tabs {
        flex-direction: column;
        border-bottom: none;
    }

    .comarquage-tabs__btn {
        margin-right:  0;
        margin-bottom: 3px;
        border-radius: var(--sp-radius);
        border:        1px solid var(--sp-border);
    }

    .comarquage-tabs__btn.is-active {
        border-color: var(--sp-orange);
    }

    .comarquage-accordion-controls {
        flex-direction: column;
        align-items:    flex-start;
        gap:            .35rem;
    }
}

/* ----- PRINT ----------------------------------------------- */
@media print {
    .comarquage-tabs,
    .comarquage-accordion-controls {
        display: none;
    }

    .comarquage-accordion__content[hidden] {
        display: block !important;
    }

    .comarquage-panel {
        display: block !important;
    }
}

/* =============================================================
   LISTE DE FICHES (shortcode [comarquage_liste])
   Reproduit le rendu divion.fr : chevrons oranges + liens
   ============================================================= */

.comarquage-liste {
    margin: 1.5rem 0;
}

.comarquage-liste__titre {
    font-size:     1.125rem;
    font-weight:   700;
    margin-bottom: 1rem;
    color:         var(--sp-text);
}

.comarquage-liste__ul {
    list-style:  none;
    margin:      0;
    padding:     0;
    border-top:  1px solid var(--sp-border);
}

.comarquage-liste__item {
    border-bottom: 1px solid var(--sp-border);
}

.comarquage-liste__link {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    padding:         .7rem .5rem;
    color:           var(--sp-text);
    text-decoration: none;
    font-size:       .9375rem;
    transition:      color .15s, background .15s;
}

.comarquage-liste__link:hover {
    color:      var(--sp-orange);
    background: var(--sp-bg-light);
}

.comarquage-liste__link--no-link {
    cursor: default;
}

/* Chevron double > en SVG inline via CSS */
.comarquage-liste__chevron {
    display:     inline-block;
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    position:    relative;
}

/* Deux traits formant un > doublé orange */
.comarquage-liste__chevron::before,
.comarquage-liste__chevron::after {
    content:      '';
    position:     absolute;
    top:          50%;
    width:        7px;
    height:       2px;
    background:   var(--sp-orange);
    border-radius:1px;
}

/* Flèche gauche */
.comarquage-liste__chevron::before {
    left:      1px;
    transform: translateY(-3px) rotate(45deg);
}

.comarquage-liste__chevron::after {
    left:      1px;
    transform: translateY(1px) rotate(-45deg);
}

/* Focus accessible */
.comarquage-liste__link:focus-visible {
    outline:        3px solid var(--sp-blue);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 600px) {
    .comarquage-liste__link {
        padding: .6rem .25rem;
        font-size: .875rem;
    }
}
.comarquage-liste__ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 30px 0 !important;
    display: grid;
    gap: 14px;
}

@media (min-width: 900px) {
    .comarquage-liste__ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.comarquage-liste__item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.comarquage-liste__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #ef7d00;
    border-radius: 8px;
    color: #1d1d1d;
    text-decoration: none !important;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(0,0,0,0.04);
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.comarquage-liste__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    color: #ef7d00;
}

.comarquage-liste__chevron::before {
    content: "›";
    color: #ef7d00;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
}